Workshop: Calculadora con Javascript puro y CSS

[@galiprandi]

Genial Alvaro! Te comparto una calculadora que estamos haciendo con mi hijo de 11 años para que empiece a aprender a programar, se re enganchó.

[@MaximilianoLucero-xs7fc]

La verdad muy bonito jaja, y pensar que en react eso lo hice en 10 minutos y se que con javascript puro tardaría más jaja. Yo creo que estaría bueno que en la pantalla no esté el valor 0 como valor inicial, puede ser una opción pero en caso de valor inicial pondría (" ") string vacio, pero igual muy bueno el vídeo además que muestras los errores en el videos y no lo salteas, eso demuestra y nos enseña como utilizar el pensamiento crítico en cada problema que nos fuera a surgir. Gracias Álvaro eres un genio, saludos desde argentina. Me hubiera gustado participar en los eventos de EDteam en Perú, cuánto tenga dinero sera😂🎉

[@angelicavergara4129]

Muy buen video, me ayudaste un montón con varios detalles de una calculadora que llevo varios días haciendo, he visto varios videos y la verdad me parecían tediosos la mayoría, me gusto este, sin tanto código (al menos en el JavaScript), sin tanto enredo, directo al grano, aún me quedan varios detalles pendientes pero me ayudaste a avanzar mucho, muy agradecida.

[@ercntreras]

Excelente Alvaro gracias!! Con esto me doy cuenta del buen contenido que puedes llegar a ofrecer para tomar un curso o unas clases en EDTeam.

[@johanretd3839]

Debes corregir el titulo, yo pense que era puro js y css, pero para usar tu repositorio es necesario instalar gulp, sass y git(no hay problema con este), pero no todos tenemos gulp :c, no digo q este mal usarlo, pero al menos avisa correctamente xq en la descripción dice "SIN FRAMEWORK"

[@jonathanestrella6130]

Wow!! This workshop is very awesome, I love EDteam. 😘

[@cristianbarrios7341]

Por qué en inglés?

[@Neil_Jordan]

@@cristianbarrios7341 obviamente porque es gringo, obvio no ? se le nota xD

[@emmanuelrojasmusica]

Muy buen video, existe una manera de hacer una operación y al seguir presionando el botón de suma por ejemplo, se siga sumando el resultado por su misma cantidad?

[@pablocantero1038]

Buen video, bien explicado todo! En la parte final de JS (no se si seré el único al que le ocurre) después de realizar una operación y obtener resultado, si pulso de nuevo "=" repite number1 y la operación realizada y se añade al resultado final, es decir 50 + 100 = 150.. si pulso de nuevo "=" aparece 200, si pulso de nuevo 250 y asi sucesivamente ¿Como se puede solucionar ese problema ? Un saludo gracias!!

[@adolfoleonidas]

Excelente ,Muy bueno 👏👏👏

[@RonTxT]

Excelente Workshop Alvaro

[@pabloandresfernandezcari2902]

Gracias!!!!

[@anell0784]

Super bueno el video!!

[@javi68yt2]

está genial! 👏👏👏 está el código en algún repo? p.e. yo hubiera resuelto el tema del punto decimal con una variable de guarda igual que en los otros casos.

[@jhonjairohernandezcalzada8521]

excelente video genial!!!!!

[@tormentboy]

tenias que intentar con numero con mas de un punto porque en las calculadora no se pueden poner mas de un punto y eso era para ver si no daba ese error

[@takasakiespanol4036]

Al ver este video, me imaginé que algo igual se podía hacer para crear un botón de caracteres en lugar de números. Es decir, busco una etiqueta en JavaScript que adicionada a un botón me escriba un caracter en el espacio de texto. Trabajando con Adobe Captivate, las respuesta en el text box contiene una ñ o a veces una vocal con tilde. El programa no tiene esa herramienta, pero si cuenta con la opción de adicionar al botón una orden que ejecute un acción con JavaScript. ¿Será esto posible? Cordial saludo.

[@Cabeza1487]

Me perdí con el github! de entrada.

[@richardjs312]

x2

[@andrewswarren7257]

x3

[@francomantilla2437]

x4

[@alekbond8051]

✌👏

[@lazykiller87]

calculadora.pug la debo escribir yo? o sale con npm install?

[@edgarmendoza3838]

En donde diseñaste el muckup???

[@Terzaghi12]

Adobe Xd

[@EzeCriis]

Genio, disculpa clone el repo le di a npm install -g gulp-cli y npm install pero cuando tiro el comando gulp dev no lo reconoce, alguna sugerencia? Saludos!

[@ercntreras]

x2

[@juliohurtado2906]

La lógica no es correxta

[@pfap1958]

Buena la practica, lo único que realizaba un cambio en el código tenia que reiniciar el servidor PD: NodeJS v14.15.1 y npm v7.6.1

[@NKunlimited]

primero

[@cristianbarrios7341]

Esa necesidad de aclarar la edad que tienen algunos...

[@mauroinde]

La verdad, en el github ya no hay codigo. O al menos yo no lo encontre

[@pablolusarreta]

Te podías ahorrar el swich haciendo: Añadir a getOperation: const operator = element.textContent Y en el getResult: sustituir todo el switch por: screen.textContent = eval('mumber1'+operador+'number2')

[@EDteam]

Eval() es muy mala practica en JavaScript

[@CristianRomero-up1nj]

Queremos el code

[@YeyoJuarezh]

Me parece una grosería o simplemente algo de mal gusto, el vender el video con una primicia y al final no cumplirla por completo. Deberías tener algo de respeto por todos los que decidimos invertir 47, casi 50 minutos en mirarte en un video, esperando con paciencia ser recompensados con la primicia inicial y no menospreciar la parte del css (quizá algunos estaban aquí solo por eso), en mi caso venia por ambos y me dejas con un sentimiento de decepción. En fin, entiendo que no fue con mala intención. Muy interesante la parte de js, cada vez encuentro cosas nuevas por aprender. Un abrazo, saludos Alvaro,

[@alvarofelipechavez]

Me parece una grosería tu comentario. Si no va a ser productivo no comentes. Tu viste 50 minutos de video. Prepararlo fueron varias horas sin contar los años de experiencia que hay detrás de eso. ¿Menospreciar CSS? Los hacks de CSS Grid del final no los vas ver en ningun otro lado. Por favor deja de comentar.

[@tomasgomez2936]

callate cabeza de termo

[@juanoliver]

No es que yo sea egoísta, pero pensaba que los workshop iba a estar disponibles solo para los suscriptores, es decir, en la app. Me equivoqué?

[@EDteam]

Este es el primer ejercicio. El workshop total tiene más de 10 y estará solo en la app.

[@LeonardoGrabow]

Estimado, he logrado avanzar, sin embargo, estoy revisando y cuando agrego la variable result con let, funciona el Error en la división por 0, pero no las demás operaciones (multiplicar, dividir, y restar). directamente deja de funcionar el = para estas operaciones, me podría dar algun tip?

[@LeonardoGrabow]

El código que tengo en runOperation es: const runOperation = (operation) => { const getResult = (number1,typeOperation) => { const number2 = Number(screen.textContent) let result switch (typeOperation) { case 'add': result = number1 + number2 break; case 'minus': result = number1 - number2 break; case 'multiply': result = number1 * number2 break; case 'divide': result = number1 / number2 break default: break; } result === Infinity ? screen.textContent = 'Error' : screen.textContent == result } operation === 'clear' ? screen.textContent = '0' : getResult(number1,typeOperation) operationStatus = true } A ver si me logras dar una mano. Si elimino el "result" y lo dejo con screen.textContent si funciona el = con las operaciones

[@LeonardoGrabow]

Me Autorespondo, en en result === Infinity, habia puesto un = de más...

[@jackalvarez9866]

Che, pero no serìa mejor, guardar las pulsaciones de botones en un array y luego utilizar eval(array) para obtener un resultado.

[@alvarofelipechavez]

eval() es muy mala práctica, salvo que seas muy pro en JS y sepas muy bien lo que estás haciendo jamás deberias usar eval() por seguridad.

[@mateoj8561]

Y si quiero hacer la siguiente operación 45+34/3*5 como hago ?