Eventos en JavaScript: interactuando con usuarios

Para pasar los strings capturados en el input podemos usar las funciones Number() o parseInt(), quedaria:
Number(input1.value) o parseInt(input1.value)

Marianela Rodriguez

Hola profe, para pasar los strings a números utilicé el atributo “+” antes del string para cambiar su valor.

const h1 = document.querySelector("h1");
const input1 = document.querySelector("#calculo1");
const input2 = document.querySelector("#calculo2");
const btn = document.querySelector("#btnCalcular");

function btnOnClick() {
  console.log(+input1.value + +input2.value);
}

Oscar Bucio Barrera

Realicé una calculadora de propinas con HTML, CSS y JavaScript. Lo disfruté mucho y aprendí bastante

La idea la saque de la página https://www.frontendmentor.io/
Hay muchos retos para poner en práctica los conocimientos adquiridos.

Maria del Carmen Valero Carreño

Me encanta este curso, por fin entiendo muchas cosas, debería haberlo visto antes de muchos otros en la escuela de desarrollo web… Gracias

Rubén Ernesto Aragón Gil

Agregué a resta, multiplicación y división. Les comparto el código:

Resultado:

Jherom Chacon

Jugando con esta clase he decidido probar creando una calculadora de operaciones aritméticas básicas:

Para esto definí este código HTML, fue interesante investigar como funcionan los option button para que funcionen como un grupo y permitan solo seleccionar una de las opciones disponibles:

Finalmente agregué la función que calcula y manipula el DOM con lo que vimos en la clase pasada:

Vicente Valderrama

Con esta clase recordé esta joyita xD

Xiomara Arzola

MEEEE ENCANTAAAAAAAA!!!

Diego Alejandro Moreno Pedroza

https://dimorenop.github.io/curso-practico-de-javascript/

Casi no lo termino!!! Pero este es un pequeñito proyecto que hice por puras ganas

Juan Pablo Ospina Restrepo

Realice un pequeño cambio en mi HTML para que tuviera correctamente estructura según cursos anteriores visto en la ruta de Escuela desarrollo web (Solamente le agregue el tipo de dato que recibe mi input)

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    
    <title>Document</title>
</head>
<body>

    <h1>Manupulacion del DOM basica</h1>

    <input id="calculo1" placeholder="Escribe algo aqui" type="number">
    <input id="calculo2" placeholder="Escribe algo aqui" type="number">
    <button id="btnCalcular" onclick="btnOnclick()">Calcular</button>

    <p id="result"></p>

    <script src="./main.js"></script>

</body>
</html>

const input1 = document.getElementById('calculo1')
const input2 = document.getElementById('calculo2')
const btnCalcular = document.getElementById('btnCalcular')
const resultado =  document.getElementById('result')


function btnOnclick(){
    const sumaInput = parseInt(input1.value) + parseInt(input2.value);
    resultado.innerText = "Resultado "+sumaInput
}

lucas pace

DETALLE A TENER EN CUENTA:
no se si todos lo sabian pero yo lo descubri haciendo practicas de esta misma clase.
tomare de ejemplo el onchange=“console.log(‘cambio el input’)”

cuando le damos el valor al atributo, utilizamos comillas dobles, y cuando escribimos el string dentro del console.log utilizamos comillas simples, esto lo hace el profesor juan dc y si hacemos lo mismo no hay problema.
PERO si utilizaramos comilla doble dentro de los parentesis del console.log “console.log(“cambio el input”)” generaria un error, ya que confundiria el inicio del string dentro de los parentesis, con el cierre de las primeras comillas doble.

no se si todos se percataron de esto o ya lo sabian, pero yo me di cuenta recien y queria dejar este aporte por si a alguien mas le sucedia y no se daba cuenta.

Héctor Haro Hermosillo

Algo asi para agregarlo a pantalla

Natanael Borge Guerrero

Con lo que aprendí hice una calculadora. Ahí vamos, poco a poco.

WhatsApp Image 2023-01-20 at 3.01.53 AM (1).png

Eduardo Zegers

hace 8 meses

Vengo de cursos posteriores: este curso es sumamente importanteeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

Magdiel Linares

Aqui mi investigacion de como convertir String a Number:

let result;
let value1 = input1.value;
let value2 = input2.value;

//Number(valor)
//Convierte a Number. "12" -> 12 
result = Number(value1) + Number(value2);

//parseInt()
//Convierte a Number entero, se indica la base en el sistema //numeral
// En este caso 10 es sistema Decimal
// "19.99" -> 19 
result = parseInt(value1, 10) + parseInt(value2, 10);

//parseFloat()
//Convierte a Number dejando la parte decimal. "10.2" -> 10.2
result = parseFloat(value1) + parseFloat(value2);

//(+valor)
//Convierte a Number y deja la parte decimal. "12.99" -> 12.99 
result = (+value1) + (+value2);

//(valor * 1)
//Convierte a Number y deja la parte decimal. "19.99" -> 19.99  
result = (value1 * 1) + (value2 * 1);

//(valor / 1)
//Convierte a Number y deja la parte decimal. "10.5" -> 10.5 
result = (value1 / 1) + (value2 / 1);

//(valor - 0)
//Convierte a Number y deja la parte decimal. "19.99" -> 19.99 
result = (value1 - 0) + (value2 - 0);

//(~~valor)
//Convierte a Number y quita la parte decimal. "19.99" -> 19 
//Convierte a 0 si se pasa un String. "Bien" -> 0
//Usar para enteros de no mas de 32 bit
result = (~~value1) + (~~value2);

//Math.floor()
//Convierte a Number y Redondea hacia abajo. "9.8" -> 9
result = Math.floor(value1) + Math.floor(value2);

//Math.ceil()
//Convierte a Number y Redondea hacia el entero mas grande. "7.18" -> 8
result = Math.ceil(value1) + Math.ceil(value2);

//Math.round()
//Convierte a Number y Redondea hacia el entero mas grande proximo. "6.3" -> 6
result = Math.round(value1) + Math.round(value2);

EstuardoLofish

Hola, Estoy en el curso práctico de JavaScript y voy por la clase 12 y por lo que veo esta mal el video con el seguimiento de las clases y estos comentarios.

Raúl Adolfo Sánchez Rodríguez

¿Cómo convertir los valores recibidos del <input> en números?

Forma 1: utilizando la función Number( )
Forma 2: utilizando la función parseInt( ): Esta permite transformar un string a números enteros
Forma 3: utilizando la función parseFloat( ): Esta permite transformar un string a números decimales. Si queremos sumar números decimales, conviene utilizar esta función.

PEDRO QUIÑONES PATERNINA

Algo muy sencillo pero ahorra mucho codigo para convertir de string a number es agregar el signo (+) de la siguiente forma:

function btnCalcular(){
    const suma = (+calculo1.value) + (+calculo2.value)
    resultado.innerText = "El resultado de la suma es: "+ suma
}

David Abraham Pérez Boch

Usando la propiedad de parseInt logre cambiar mis strings a numeros y me quedo así

function btnClick() {
  console.log(parseInt(input1.value) + parseInt(input2.value));
}

Jhoan Sebastián Lopera Gallego

Lo hice añadiendo un “+” antes de cada input

Duvan Alexis Palomino Ramirez

la funcion en JavaScript para transformar datos de tipo string en un dato de tipo numero es la 'parseInt();'
eje:
function btnOnClick(){
const sumaInputs = parseInt(input1.value) + parseInt(input2.value);
pResult.innerText = 'Resultado: ’ + sumaInputs;
};

Samuel Felipe Calderon Osorio

este profee explica muy bien y hace que el contenido sea muy emocionante. sus clases son muy enriquecedoras

Jamy Morales

const input1 = document.querySelector('#value1')
const input2 = document.querySelector('#value2')
const btn = document.querySelector('#btnCalculate')
const result = document.querySelector('#result')


function suma() {

    const sumOfValues = parseInt(input1.value)+parseInt(input2.value);

    result.innerHTML= 'The result of the addition is: ' + sumOfValues

    
}

Gian HM

const num1 = document.querySelector("#number1");
const num2 = document.querySelector("#number2");
const sum = document.querySelector("#suma");

function calcular(){
    result = Number(num1.value)+ Number(num2.value);
    sum.innerText = result
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Practicando</title>
</head>
<body>
    
        <fieldset>
            <legend>Calculadora</legend>
            <label for="number1">
                <span>Ingresa el número 01</span>
                <input type="text" name="number1" id="number1" placeholder="Escribiendo....">
            </label>
            <label for="number2">
                <span>Ingresa el número 02</span>
                <input type="text" name="number2" id="number2" placeholder="Escribiendo....">
            </label>
            <button id="calcular" onclick="calcular()">Calcular</button>
        </fieldset>
        <br>
        <fieldset>
            <legend>Resultado</legend>
            <label for="Suma">
                <p id="suma"></p>
            </label>
        </fieldset>
        
        <script src="./script.js"></script>
    
</body>
</html>```

David Jackson

asi quedo para que se sumen normalmente

<code> const h1 = document.querySelector('h1');
const input1 = document.getElementById('calculo1');
const input2 = document.getElementById('calculo2');
const btn = document.getElementById('btn-calcular');
const presult = document.getElementById('resultado');


function btnOnclick() {
    let resul1 = Number(input1.value);
    let resul2 = Number(input2.value);
    let resul3 = resul1 + resul2;
    presult.innerText = "el resultado es " + resul3;
}

Raúl Adolfo Sánchez Rodríguez

Pasos para mostrar resultado de la suma en el documento HTML

Crear un elemento HTML que almacenará el resultado, en este caso un elemento <p>
Crear una variable que representen al elemento HTML creado en JavaScript
Modificar función de suma, utilizando la propiedad .innerHTML o .innerText para agregar contenido al elemento <p> creado en el paso 1°
Agregar la función al atributo global “onclick” en el documento HTML
Probar en el navegador la función SUMA cuyo resultado debe aparecer en el documento HTML

Abigail Nahomi Chávez Lozano

Para el minuto 11, pense en cambiar el tipo de input text a input tipo number, asi, si ya recibe números, puede sumar sin problema y no concatenar… pero no funciono😂. Aún cambiando el tipo de input, debo usar el Number()👍.

Daniela Suárez

Para que solo les reciba valores de tipo número pueden poner en el tag HTML de input el atributo type = number

Damián De Aguiar

Hoy aprendí que no es lo mismo usar comillas dobles a comillas simples. Hasta ahora siempre había usando comillas dobles para escribir los string pero llegué a un error por ello.

Si lo escribo de esta forma, las segundas comillas dobles, osea las que abren el string en el console.log, causan un error. Lo que sucede es que el navegador lee como que las primeras comillas fueron cerradas.

 <input onchange="console.log("cambió el input")" id="calculo2" placeholder="Escribe alg">

Por eso ahora entendí porqué se usan distintas comillas para distintas cosas.

Quedaría así:

   <input onchange="console.log('cambió el input')" id="calculo2" placeholder="Escribe alg">

Emilio Salvatore Ampuero Sepúlveda

Para sumar valores en JS se puede usar parseInt() o Number()

Raul Ochoa

Lo resolví de la siguiente manera:

function btnOnClick() {
    const sumaInputs = parseInt(input1.value) + parseInt(input2.value);
    result.innerText = "La suma es " + sumaInputs;
}```

Joaquin esteban

Hola este es el codigo JavaScript que hice de uan calculadora. Saludos!!

btapoblete

Con los ejemplos del profe JuanDC siento que por fin entiendo bien JavaScript T-T estoy super feliz no puedo parar de aprender en este curso!

Luis Magallanes

en mi caso use

const sumInput = parseInt(input1.value) + parseInt(input2.value);

pasa de string a numeros… en el caso de que le ingrese strings solo me responde NaN

Lautaro Els

const input1 = document.querySelector("#numero1"); 
const input2 = document.querySelector("#numero2"); 
const btn = document.querySelector("#btncalcular"); 

function clickbutton(){
    console.log(Number(input1.value) + Number(input2.value))
}

Javier Felipe Ortiz Brun

hace 3 meses

También se puede convertir a número simplemente multiplicando por 1, pero no se que tan conveniente o limitante sea su uso.

function btnOnClick(){
    console.log(Number(input1.value) + (input2.value*1));
}

Natalia Tavera

hace 4 meses

Para conseguir que el resultado fuera numérico en lugar de que simplemente los concatenara, realice lo siguiente:

const h1 = document.querySelector('h1');
const input1 = document.querySelector('#calculo1');
const input2 = document.querySelector('#calculo2');
const btn = document.querySelector('#btnCalcular');

function btnOnClick()
{
    result = parseInt(input1.value) + parseInt(input2.value);
    console.log(result);
}

Ultisaer Revternae

hace 5 meses

Mi solución fue multiplicar por 1 los datos que daba el usuario para pasarlo de texto a numeros

const input1 = document.querySelector("#calculo1")
const input2 = document.querySelector("#calculo2")
const btn = document.querySelector("#btnCalcular")
const result = document.querySelector("#result")

function btnOnClick() {
    const resultado = (input1.value * 1)+ (input2.value *1)
    result.innerText = `El resultado es: ${resultado}`
}

Oscar Martinez

Así se pueden convertir a números las entradas de los usuarios 🛴. Usamos el objeto Number de JavaScript.

const h1 = document.querySelector('h1')
const input1 = document.querySelector('#calculo1')
const input2 = document.querySelector('#calculo2')
const btnCalcular = document.querySelector('#btn-calcular')

function btnOnClick() {
    console.log(Number(input1.value) + Number(input2.value))
}

Cristopher Muñoz Aviles

function btnOnClick() {
    let nu1= parseInt(input1.value);
    let nu2= parseInt(input2.value);
    let suma = nu1+nu2;
    pResult.innerText = "resultado: "+suma;
}

Lucia Nishimiya

Prueba mi calculadora: https://mondongo.cf/platzi/calculadora

Use la función eval() para convertir el valor concatenado de un select del tipo de calculo y los numeros que introdujo el usuario en una operación matemática

eval() es una función que toma una cadena de texto y la convierte en código

script.js

const oneNumber = document.querySelector('#oneNumber');
const twoNumber = document.querySelector('#twoNumber');
const resultado = document.querySelector('#Resultado');
const tipoCalculo = document.querySelector('#TipoCalculo');
const sumar = document.querySelector('#Calcular');

sumar.addEventListener('click', function () {
  resultado.innerHTML = eval(`${Number(twoNumber.value)} ${tipoCalculo.value} ${Number(oneNumber.value)}`)
});

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Calculadora Curso p js clase </title>
    <link rel="stylesheet" href="style.css">

</head>

    <body>
    <div class="container">
        <h1>Calculadora</h1>
        <div class="Resultado"><p><span id="Resultado">0000</span></div>
        <div>
            <input type="number" name="oneNumber" id="oneNumber">

<!-- El elemento <select> se utiliza para crear un menú desplegable -->
            <select name="TipoCalculo" id="TipoCalculo">
                <option>+</option>
                <option>-</option>
                <option>*</option>
              </select>
            <input type="number" name="twoNumber" id="twoNumber">
        </div>
        <div>
     <button id="Calcular">Calcular</button>
    </div>
    <script src="script.js"></script>
</body>

</html>

style.css

:root {
    --background: #253535;
    --textcolor: #ffffff;
    --boxcolor: #51515133;
    --screencolor: #4f8300;
}

body {
    background: var(--background);
    color: var(--textcolor);
    margin: 0;
}

.container {
    display: flex;
    align-items: center;
    width: 40%;
    flex-direction: column;
    margin: 10% auto;
    background-color: var(--boxcolor);

}

.Resultado {
    border: 4px solid var(--background);
    margin-top: 5px;
    margin-bottom: 20px;
    max-width: 330px;
    background-color: var(--screencolor);
}

.Resultado p {
    font-size: 50px;
    margin-top: 0;
    margin-bottom: 0px;
    font-style: oblique;
}

button {
    margin-top: 60px;
    margin-bottom: 20px;
    font-size: 20px;
}

input {
    width: 60px;
}

Spanglish :v

Maria Gabriela Rodriguez Cuevas

🎮 Archivos del Proyecto 🎮

Pasos 📌

• En la terminal, dentro de la carpeta del proyecto llamado curso-js-practico (para devolverse a esa carpeta estando en el otro mini-proyecto se ejecuta: cd ..), se crea otra carpeta para el mini-proyecto llamada eventos-javascript ejecutando:

take  eventos-javascript

• Abrir el editor VS Code ejecutando:

code .

• En el menú izquierdo de VS Code, crear un nuevo archivo llamado index.html, el código queda:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Manipulación del DOM básica - Curso Práctico de JavaScript</title>
</head>
<body>
	<h1>Manipulación del DOM básica</h1>

	<input id="calculo1" placeholder="Escribe algo aquí" />
	<input id="calculo2" placeholder="Escribe algo aquí" />
	<button id="btnCalcular" onclick="btnOnClick()">Calcular</button>

	<p id="result"></p>

	<script src="./script.js"></script>
</body>
</html>

• Crear otro archivo llamado script.js, el código queda:

const h1 = document.querySelector('h1');
const input1 = document.querySelector('#calculo1');
const input2 = document.querySelector('#calculo2');
const btn = document.querySelector('#btnCalcular');
const pResult = document.querySelector('#result');

function btnOnClick() {
	const sumaInputs = input1.value + input2.value;
	pResult.innerText = "Resultado: " + sumaInputs;
}

• Para correr el script, se da click derecho sobre el nombre de index.html en el menú de VS Code y se selecciona “Open with Live Server”, aparece un navegador, se da click derecho en la página y se selecciona “Inspeccionar”, luego se selecciona la pestaña “Console”, dado que el archivo script.js no se mandó a imprimir con console.log, en la consola no aparece resultados.
• El resultado se obtiene después de ingresar valores a los 2 cuadros de input y se le da click al botón de “Calcular”, mas abajo aparece la concatenación de ambos inputs.

Santiago López Alarcón

const h1 = document.querySelector('h1');
const input1 = document.querySelector('#calculo1');
const input2 = document.querySelector('#calculo2');
const btn = document.querySelector('#btnCalcular')
const pResult = document.querySelector('#result')

function btnOnClick() {
   const sumaInputs = input1.value + input2.value; 
   pResult.innerText = "Resultado: " + sumaInputs;
}

José Rodrigo Álvarez Herrera

Yo usé la función constructora Number(), para que funcione si
se ingrean enteros o flotantes.

Enyell Duarte

Existen diferentes formas de convertir un string a número en mi caso lo hice con las funciones Number () y parseInt()

function btnOnclick(){
    console.log(Number(input1.value) + Number(input2.value))
};
function btnOnclick(){
    console.log(parseInt(input1.value) + parseInt(input2.value))
};

Aquí les dejo el sitio web del cual me fije https://www.delftstack.com/es/howto/javascript/convert-string-to-number-javascript/

Emmanuel Herrera

practicando con el html, css y js, paso a paso mi gente

![](

Janet Torres

Para convertir los strings a números usé parseInt(), a esta conversión se le llama coerción explícita, porque el usuario obliga a que se realice el cambio de tipo, el código quedó así:

console.log(parseInt(input1.value) + parseInt(input2.value));

Ana Selene Zarate Lopez

Buenas tardes, les muestro mi calculadora con mi resolución de la suma de los 2 inputs.
** HTML**
![](
JS
![](

Ivan Delsart

Con ParseInt, para convertir numeros string a numbers

var input1 = document.querySelector('#input1')
var input2 = document.querySelector("#input2");
var btn = document.querySelector("#btnResult");
var resultado = document.querySelector("#imprimirResultado")


function calcu(){
 let suma = parseInt(input1.value) + parseInt(input2.value);
 resultado.innerText = suma
}

Johan Puentes

esta es mi solución, usando la función parseInt() que nos retorna un entero:

const btn = document.getElementById('btn');
const input_1 = document.getElementById('input1');
const input_2 = document.getElementById('input2');


function onClickBtn () {
    let value1 = parseInt(input_1.value);
    let value2 = parseInt(input_2.value);

    console.log(value1 + value2);
}

Ivan Cio Toral

Para converitr datos se puede usar el Number() o parseInt()
ingresando dentro de los parentesis los input.value.

Carlos Arevalo

Esta es mi solucion al reto de pasar los string a numeros

Álvaro Josué Prado Tenorio

yo le puse un parseInt a mis inputs para que se sumen leyendo solo números.

Ivan Rojas

Aporte de la funcion OnClick, mostrando el resultado en el <h1>

function btnOnClick(){
    let valor = Number(input1.value) + Number(input2.value);
    h1.innerHTML = `El resultado de la suma es <br> ${valor}`;
}

Benjamin Rodriguez

Calculadora muy basica

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manipulación del DOM básica</title>
</head>
<body>
    <h1>Manipulación del DOM básica</h1>
    <input onchange="console.log('Cambio el input')"id="calculo1" placeholder="Escribe algo aqui"/>
    <input id="calculo2" placeholder="Escribe algo aqui"/>
    <button id = "btnCalcular" onclick="btnOnClickSum()">Sumar</button>
    <button id = "btnCalcular" onclick="btnOnClickMinus()">Restar</button>
    <button id = "btnCalcular" onclick="btnOnClickDiv()">Dividir</button>
    <button id = "btnCalcular" onclick="btnOnClickMult()">Multiplicar</button>
    
    <p id="result"></p>

    <script src = "./script2.js"></script>
</body>
</html>

const h1 = document.querySelector('h1')
const input1 = document.querySelector('#calculo1')
const input2 = document.querySelector('#calculo2')
const btn = document.querySelector('#btnCalcular')
const pResult = document.querySelector('#result')

//Lo que sucede aqui es concatenacion, lo que se guarda
//automaticamente es string, hay que convertirlos a num
function btnOnClickSum () {
    const sumInputs = Number(input1.value) + Number(input2.value);
    pResult.innerText = "Resultado: "+sumInputs;
}

function btnOnClickMinus () {
    const sumInputs = Number(input1.value) - Number(input2.value);
    pResult.innerText = "Resultado: "+sumInputs;
}

function btnOnClickDiv () {
    const sumInputs = Number(input1.value) / Number(input2.value);
    pResult.innerText = "Resultado: "+sumInputs;
}

function btnOnClickMult () {
    const sumInputs = Number(input1.value) * Number(input2.value);
    pResult.innerText = "Resultado: "+sumInputs;
}

Camilo Parra

function prueba() {
const numero1 = parseInt(input1.value);
const numero2 = parseInt(input2.value);
console.log(numero1 + numero2);
}

Maximo Ulloa

Siguiendo la misma idea del código del profe, haría esto:

function btnOnClick() {
    console.log(parseInt(input1.value, 10) + parseInt(input2.value, 10));
}

Ismael Alonso Vázquez

Para convertir los valores de los input en a números utilice la función Number():

function btnOnClick() {
  console.log(Number(input1.value) + Number(input2.value));
}

Jehiko Mosquera

Para cambiar el valor de los inputs se puede usar la función de parseInt para números enteros o parseFloat para números flotantes (números con decimales)

Fernando Yutiz

Hashtag
Almohadilla
Numeral
En ingles parece que tiene mas de 20 nombres utilizados.

Joel Carlos Condori Callisaya

function sumar(){
    const num1 = document.querySelector('#box1');
    const num2 = document.querySelector('#box2');

    let resultado = parseInt(num1.value) + parseInt(num2.value);

    const h2 = document.querySelector('#aqui');
    h2.innerHTML = resultado;

}

Darian Perdomo

function btnOnClick() {
        let inputConv1 = parseFloat(input1.value);
        let inputConv2 = parseFloat(input2.value);

        console.log(inputConv1 + inputConv2);
};

Jonathan David Olivos

Mis Apuntes en Notion:
Apuntes

Federico Arias

podemos hacer cohersion explicita en JS o directamente poner en el HTML que el input es float

edgar zambrano

En esta clase despeje muchas dudas .Muchas gracias Juan DC

Luis Miguel Rodriguez

Me tomé el atrevimiento de realizar diferentes operaciones y así me quedó el codigo, cualquier aporte es recibido con amor ❤️

<const input1= document.getElementById('calculo1');
const input2 = document.getElementById('calculo2');
const btn = document.getElementById('calcular');
const operacion= document.getElementById('operaciones');


function btnOnClick(){
    switch(operacion.value){
        case "Suma": 
        const suma = parseInt(input1.value) + parseInt(input2.value);
        resultOperation(suma);
        break;

        case "Resta": 
        const resta = parseInt(input1.value) - parseInt(input2.value);
        resultOperation(resta);
        break;

        case "Division": 
        const division = parseInt(input1.value) / parseInt(input2.value);
        resultOperation(division);
        break;

        case "Multiplicacion": 
        const multiplicacion = parseInt(input1.value) * parseInt(input2.value);
        resultOperation(multiplicacion);
        break;
    }

}
function resultOperation(resultado){
    result.innerText = "Resultado: "+resultado;
}>

Juan Esteban Sierra Agudelo

Reto cumplido, decidí hacer una mini calculadora😄

Steven García

const h1 = document.querySelector('h1');
const calculo1 = document.querySelector('#calculo1');
const calculo2 = document.querySelector('#calculo2');
const btncalcular = document.querySelector('#btnCalcular');
const presult  = document.querySelector('#result');

function btnOnClick(){
presult.innerHTML ="resultado es: " + (parseInt(calculo1.value) + parseInt(calculo2.value));
}

Brandon Cortes Rivera

el Atributo ValueAsNumber, lo combierte a número!

function bntOnClick(){
    console.log(input1.valueAsNumber + input2.valueAsNumber);
};

JoaoGarduno

Estas funciones llamadas “parseInt” y “Number” ambas son utilizadas para convertir un dato de tipo “string” a “number” o “numerico”.
.
parseInt:
La función “parseInt” analiza el valor de entrada, es decir, analizará hasta el primer carácter de la cadena.
.
Number:
Mientras que “Number” convierte el tipo de dato, pero este intentará convertir toda la cadena de datos la cual sea ingresada.

Gianluca Reyes Cisneros

Que buena clase me gusto

Elian Gonzalez

Me parecio la mejor manera de escribir el codigo y tener una mini calculadora solo un pequeño aporte 😃

Dario Izurdiaga

<input type="text" name="" id="calculo1">
<input ype="text" name="" id="calculo2">
<button id="btnCalcular" onclick="btnOnClick()" >Calcular</button>

<p id="result"></p>

<script>
const input1 = document.querySelector('#calculo1');
const input2 = document.querySelector('#calculo2');
const btn = document.querySelector('#btnCalcular');
const pResult = document.querySelector('#result');

function btnOnClick(){
    const sumaInputs = Number(input1.value) + Number(input2.value);
    pResult.innerText = sumaInputs;
}
</script>

Johel Jesus Hoces Saenz

Mi humilde aporte 😃

Result 😃

Víctor Danilo Araya Castillo

<body>
    <h1>Manipulacion del DOM básica</h1>

    <p>Sumar dos números</p>
    <input id="num1" type="number" placeholder="numero 1">
    <input id="num2" type="number" placeholder="numero 2">

    <button id="calc" type="submit">Calcular</button>

    <p id="result"></p>

    <script src="./dom.js"></script>
</body>

const input1 = document.getElementById("num1");
const input2 = document.getElementById("num2");
const buttonCalc = document.getElementById("calc");
const resultP = document.getElementById("result");

buttonCalc.addEventListener("click", () => {
  const num1 = parseInt(input1.value);
  const num2 = parseInt(input2.value);
  const total = num1 + num2;
  console.log(total);

  resultP.textContent = `El resultado es ${total}`;
});

Captura de pantalla 2022-11-05 a la(s) 23.12.30.png

Vicki Esther Avola

Yo utilicé la función parseInt() que me permite convertir a número un Sting y además especificar el sistema numérico con el que queremos trabajar; quizás no es la forma más corta, pero a mi juicio es la forma que hace el código escalable.

const h1 = document.querySelector('h1');
const input1 = document.querySelector('#calculo1');
const input2 = document.querySelector('#calculo2');
const btn = document.querySelector('#btnCalcular');
const pResult = document.querySelector('#result');

function btnOnClick() {
     const input1Parse = parseInt(input1.value, 10);
     const input2Parse = parseInt(input2.value, 10);
     const sumaInputs = (input1Parse + input2Parse);
     pResult.innerHTML = "Resultado: " + sumaInputs;
};

Jorge Luis Rueda Marin

Eventos en JavaScript: Interactuando con usuarios

- Se pueden leer los eventos que ejecuta un usuario en la interacción con el html. Para leerlos requerimos  configurar en los atributos de la etiqueta el tipo de evento con el que queremos interactuar.

- Un ejemplo de estos evento son: _onclick_, _onchange_.

- Un evento se puede capturar como un atributo directamente desde las propiedades de la etiqueta, ejemplo:
...
<button id="btnCalcular" onclick="btnOnClick()">Calcular</button>
...

- la función  _btnOnClick()_ es una función definida por el programador que se encuentra definida en un archivo de JavaScript y en dónde se da la funcionalidad, ejemplo:  
...
const btn = document.querySelector('#btnCalcular');

function btnOnClick() {
    console.log('Escuchando el evento de click');
}
...

- Dentro de la función en JavaScript, podemos operar con otros objetos del mismo html, obteniendo y modificando sus valores a renderizar. Ejemplo:
...
function btnOnClick() {
const sumaInputs = input1.value + input2.value;
pResult.innerText = "Resultado" + sumaInputs;
}
...

David Azael Rangel González

Método para transformarlo a suma de números:

function btnOnClick() {
console.log(“Escuchando el evento de click”);
console.log(Number(input1.value) + Number(input2.value));
}

kevin Antonio Quispe Arias

Carbajal Resendiz Oswaldo Moises

yo use esta manera para imprimir el resultado para no aburar del operador de concatenación.

resultado.innerText = `Resultado ${sumaResultado}`;

Raymundo Pizano González

parseInt('123');

Number('123');

//Operador +
const num1 = '55';
const num2 = '5';
console.log(+num1 + +num2); // 60

Math.floor(num1); // 55

//Flotantes
const num3 = '77.7';
parseFloat(num3); // 77.7

Math.floor(num3); // 77

//Coerción
console.log(num1 + 5);
console.log(num2 * 2);

// Doble ~~
console.log(~~num1 + ~~num2); // 60

Lidia Alarcón

Usando la función global parseInt()

<function btnOnClick(){
    console.log('Escuchando el evento del btn');
    let valor1 =  parseInt(input1.value);
    let valor2 = parseInt(input2.value);
    console.log(valor1 + valor2);
}>

Iván Vargas

Les comparto una calculadora básica que hice con lo visto en clase, aún me falta mejorar algunas cosas pero es un comienzo trabajando con Github también https://mr-gantiva.github.io/calculadora-basico/

Jayro Coime

function btnclick(){
    n1 = Number(txbox1.value);
    n2 = Number(txbox2.value);
    alert(n1 + n2);
}

Julian Santiago Castillo Corredor

SUMAR DOS NUMEROS

Archibo HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manipulación del DOM básica - Curso Práctico de JavaScript</title>
</head>
<body>
<h1>Manipulación del DOM básica</h1>
<input id="calculo1" placeholder="Escribe algo aquí" />
<input id="calculo2" placeholder="Escribe algo aquí" />
<button id="btnCalcular" onclick="btnOnClick()">Calcular</button>
<p id="result"></p>
<script src="./script.js"></script>
</body>
</html>

ARCHIVO JAVASCRIPT

const h1 = document.querySelector("h1");
const input1 = document.querySelector("#calculo1");
const input2 = document.querySelector("#calculo2");
const btn = document.querySelector("#btnCalcular");
const pResult = document.querySelector("#result");
function btnOnClick() {
  const sumaInputs = parseInt( input1.value )+  parseInt ( input2.value );
  pResult.innerText = "Resultado: " + sumaInputs;
}

Elizabeth Villarruel

Buenas buenas
Pues aquí está mi trabajo, muchas gracias!

Aquí los estilos :9


.main__container{
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 40rem;    
    display: flex;
    justify-content: center;
    align-items: center;
}

.calculadora{
    background-color: rgb(130, 18, 3);
    height: 30rem;
    width: 15rem;
    border: 1px solid black;
}

.content--flex{
    background-color: rgb(150, 204, 204);
    display: flex;
    height: 25rem;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    color: rgb(45, 45, 45);
}

.boton--flex{
    background-color: rgb(255, 255, 255);
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.boton{
    width: 10rem;
    height: 3rem;
    border-radius: 50rem;
    border: 0;
    background-color: rgb(150, 204, 204);
    font-size: 1rem;
    font-weight: 600;
    color: rgb(27, 27, 27);
    cursor: pointer;
}

input{
    width: 8rem;
    height: 2rem;
    border-radius: 50rem;
    border: 0;
    text-align: center;
}

p{
    font-size: 1.5rem;
    color: white;
    font-weight: 900;
}

Diego Alejandro Moreno Pedroza

Yo lo hice así, independientemente si es entero o si es float, se convierte a su respectivo valor

function btnOnClick() {
    let resultado = Number(input1.value) + Number(input2.value);
    pResult.innerText = `La suma es ${resultado}`
    console.log(`La suma es ${resultado}`)
}

Milton Eduardo Hernandez Carias

este es mi codigo
const h1 = document.querySelector(“h1”);
const input1 = document.querySelector("#calculo1");
const input2 = document.querySelector("#calculo2");
const boton = document.querySelector("#btnCalcular");
const pResult = document.querySelector("#result");

//funcion para sumar los input
function btnOnclick() {

// converti los dos input a numeros
const suma = Number (input1.value) + Number(input2.value);
pResult.innerText = "Resultado; " + (suma);

}

Milton Eduardo Hernandez Carias

puede funcionar tambien con el parseInt en vez de el Number de las dos maneras esta bien

Will Hernandez

En los input podemos usar onchain="" y dentro de las comillas, podemos poner una instruccion de la cual queremos que haga.

lo mismo sucede con los button, se puede usar onclick="".

Los resultados se dan en consola del navegador

Alfredo Nicolás Brade

function btnClick() {

alert(Number(input1.value)+Number(input2.value));

}

LESTHER XITUMUL MANUEL

Practicando css para que no se me olvide cómo centrar un div jeje

Pamela Clara Zambrana Foronda

//Convertir dos cadenas de texto a números y sumarlos

let val1 = document.querySelector(".value1");
let val2 = document.querySelector(".value2");
let suma = document.querySelector(".button_suma");

function btnOnClick(){
    console.log(parseFloat(val1.value) + parseFloat(val2.value));
}

YEISON FERNANDO CASTAÑO UBILLUS

function btnOnClick(){
console.log (Number(input1.value) + Number(input2.value));
}

YEISON FERNANDO CASTAÑO UBILLUS

Carlos Alexander Castillo Salamanca

Usé un condicional para que me valide si alguno de los campos queda en blanco y lo indique en un alert 😃

const number1 = document.getElementById("number1");
const number2 = document.querySelector("#number2");


function hacerSuma() {
    if(number1.value == '' || number2.value == '') {
        alert('Debes indicar los números a sumar');
    } else {
        let totalSuma = (+number1.value) + (+number2.value);
        alert("El resultado de la suma es " + totalSuma);
    }
}

Danelia Sanchez Sanchez

Alejandro Ching

Aqui va mi aporte!
HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learning the DOM management</title>
</head>

    <h1> Sumando dos numeros </h1>
    <input id = "Calculo1" placeholder="Type something"/>
    <input id = "Calculo2" placeholder="Type something"/>
    <button id="btncalcular" onclick="buttonOnClick()">Calcular</button>
    <p id="answer"></p>
    <script src="./script.js"></script>

    

</body>
</html>

javascript

const h1 = document.querySelector('h1');
const input1 = document.querySelector('#Calculo1');
const input2 = document.querySelector('#Calculo2');
const button = document.querySelector('#btncalcular');
const p = document.querySelector('#answer');
//VAMOS A ESCUCHAR LOS EVENTOS O LO QUE HAGA EL USUARIO, SE CREA UNA FUNCION PARA PONERLA EN EL HTML.

function buttonOnClick () {
    const InputsSum = Number(input1.value) + Number(input2.value);
    //PARA ACCEDER A LO QUE VA DENTRO DE ESE <P><"/P".
    p.innerText = "El resultado de la suma es de: " + InputsSum;
}

Carlos Rafael Urquizo Gómez

Aquí mi aporte

console.log(input1.value + input2.value); //Concatena
    console.log(Number(input1.value) + Number(input2.value)); //Suma los Valores

Felipe López