No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

15D
17H
27M
1S
Curso Pr谩ctico de JavaScript

Curso Pr谩ctico de JavaScript

Juan David Castro Gallego

Juan David Castro Gallego

Eventos en JavaScript: interactuando con usuarios

13/29
Recursos

Aportes 249

Preguntas 32

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

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);
}
 

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.

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

Agregu茅 a resta, multiplicaci贸n y divisi贸n. Les comparto el c贸digo:

Resultado:

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:

Con esta clase record茅 esta joyita xD

MEEEE ENCANTAAAAAAAA!!!

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

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

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>

JS

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
}

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=鈥渃onsole.log(鈥榗ambio 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 鈥渃onsole.log(鈥渃ambio 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.

Algo asi para agregarlo a pantalla

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

Vengo de cursos posteriores: este curso es sumamente importanteeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

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);

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.

驴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.

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
}

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));
}

Lo hice a帽adiendo un 鈥+鈥 antes de cada input

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;
};

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

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

    
}

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>```

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;
}

Pasos para mostrar resultado de la suma en el documento HTML

  1. Crear un elemento HTML que almacenar谩 el resultado, en este caso un elemento <p>

  2. Crear una variable que representen al elemento HTML creado en JavaScript

  3. Modificar funci贸n de suma, utilizando la propiedad .innerHTML o .innerText para agregar contenido al elemento <p> creado en el paso 1掳

  4. Agregar la funci贸n al atributo global 鈥渙nclick鈥 en el documento HTML

  5. Probar en el navegador la funci贸n SUMA cuyo resultado debe aparecer en el documento HTML

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()馃憤.

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

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">

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

Lo resolv铆 de la siguiente manera:

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

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

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!

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

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))
}

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));
}

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);
}

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}`
}


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))
}
function btnOnClick() {
    let nu1= parseInt(input1.value);
    let nu2= parseInt(input2.value);
    let suma = nu1+nu2;
    pResult.innerText = "resultado: "+suma;
}

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

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

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

馃幃 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 鈥淥pen with Live Server鈥, aparece un navegador, se da click derecho en la p谩gina y se selecciona 鈥淚nspeccionar鈥, luego se selecciona la pesta帽a 鈥淐onsole鈥, 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 鈥淐alcular鈥, mas abajo aparece la concatenaci贸n de ambos inputs.
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;
}

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

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/

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

![](

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));

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

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
}

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);
}

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

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

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

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}`;
}

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;
}

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

Siguiendo la misma idea del c贸digo del profe, har铆a esto:

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

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));
}

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)

#

  • Hashtag
  • Almohadilla
  • Numeral
    En ingles parece que tiene mas de 20 nombres utilizados.
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;

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

        console.log(inputConv1 + inputConv2);
};

Mis Apuntes en Notion:
Apuntes

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

En esta clase despeje muchas dudas .Muchas gracias Juan DC

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;
}> 

Reto cumplido, decid铆 hacer una mini calculadora馃槃

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));
}

el Atributo ValueAsNumber, lo combierte a n煤mero!

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

Estas funciones llamadas 鈥減arseInt鈥 y 鈥淣umber鈥 ambas son utilizadas para convertir un dato de tipo 鈥渟tring鈥 a 鈥渘umber鈥 o 鈥渘umerico鈥.
.
parseInt:
La funci贸n 鈥減arseInt鈥 analiza el valor de entrada, es decir, analizar谩 hasta el primer car谩cter de la cadena.
.
Number:
Mientras que 鈥淣umber鈥 convierte el tipo de dato, pero este intentar谩 convertir toda la cadena de datos la cual sea ingresada.

Que buena clase me gusto

Me parecio la mejor manera de escribir el codigo y tener una mini calculadora solo un peque帽o aporte 馃槂

<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>

Mi humilde aporte 馃槂

JS

Result 馃槂

<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}`;
});

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;
};

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;
}
...

M茅todo para transformarlo a suma de n煤meros:

function btnOnClick() {
console.log(鈥淓scuchando el evento de click鈥);
console.log(Number(input1.value) + Number(input2.value));
}

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

resultado.innerText = `Resultado ${sumaResultado}`;
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


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);
}> 

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/

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

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;
}

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;
}

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}`)
}

este es mi codigo
const h1 = document.querySelector(鈥渉1鈥);
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);

}

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

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

function btnClick() {

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

}

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

//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));
}

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

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);
    }
}

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;
}

Aqu铆 mi aporte

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

Hola! comparto mi aporte

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

function btnOnclick() {
    let result =  parseInt( input1.value + input2.value );
    pResult.innerText = "El resultado de la suma es: " + result;
}