Calculadora en HTML, CSS y JavaScript 😲

Bienvenidos a este nuevo video! 👨🏽‍💻
Les enseñaré cómo lograr este típico proyecto de calculadora en HTML, CSS y JS, con todas las funcionalidades, operaciones matemáticas de números (suma, resta, multiplicación y división). Espero que les guste!

🔗 Links

Redes

Donaciones

Contacto

⌚ Capítulos
0:00 Intro
1:15 Escribiendo HTML
4:05 Escribiendo CSS
11:40 Escribiendo JavaScript
23:38 Resultado final
24:22 Outro

[benjamincruz]

Muy buen video y para los que preguntan por la division entre 0 que les sale Infinity en la pantalla encontre una solución que les puede ayudar, primero van al if(boton.id === "igual") y se ubican en el try{} ahí habra una linea de código ya escrita y luego de esa agregan el siguiente código:

if(pantalla.textContent === "Infinity"){
pantalla.textContent = "No se puede dividir entre 0"
}

No se si es la forma más eficiente pero funciona lo unico que habra que agregar otras lineas de codigo para que no se pueda borrar o agregar mas digitos a ese "No se puede dividir entre 0" pero eso se puede solucionar como muestran en el video solo agregan:

|| pantalla.textContent === "No se puede dividir entre 0"

Eso lo agregaran en los dos if después de:

|| pantalla.textContent === "Error!"

Y debería funcionar :)

[fedev]

Buenísimo video! Para las personas que tengan problemas de desbordamiento al poner muchos números, Pueden usar el overflow. Poniendo "overflow-x: auto" en el CSS de la pantalla, cuando la cantidad de caracteres escritos, sobrepase el limite del div, se va a agregar una barrita para scrollear abajo, y ya no se va a desbordar lo que escriban. Exitos!

[enma]

Tip: Para el desbordamiento de los números en la caja de pantalla colocar el siguiente comando: overflow: hidden; este le servirá para cuando los numero no quepan dentro de la calculadora no salgan al body desbordándose.
Ejm (el ultimo estilo es el que deben agregar a su css):

.pantalla{
grid-column: 1 / 5;
background-color: #f17928;
padding: 1.5rem;
font-size: 2rem;
text-align: right;
border-radius: .5rem;
margin-bottom: 1rem;
font-family: monospace;
overflow: hidden;

[Alesso_]

Que locura en 30 minutos, vaya grande que eres gracias!

[kalingerr]

Sos un genio, lo hice tal cual solo variando los background pero el resto me quedo igual, sumado a que recien estoy aprendiendo javascript y me cuesta entender todo pero se que cuando vuelva a ver el codigo voy a entender que hace cada funcion

[diegodalera]

Esto es oro . Muchas gracias, aprendi mas haciendo esto que leyendo decenas de tutoriales

[brianacosta]

Excelente video, html y css me re sirvió para repasar. Buena dinámica de javascript para resolver las funcionalidades de los botones complejos. Un crack, mil gracias bro

[malejo]

¡Muchas gracias por tu video! Particularmente lo que considero me fue de más utilidad fue la parte del eval. Mi profesor estaba empleando otro método, supongo que para reforzar la parte de los if y los else, y realmente era muy tedioso. ¡Gracias, buen hombre! Toma tu like y suscripción.

[Dreez-gg]

Capo total! lo hice y ningun problema, deje todo comentado para luego entenderlo bien. Se va para github!!

[MegaSpartan]

Buenísimo video hermano, todo perfectamente explicado, de verdad que eres un capo!!

[robertosandoval]

Como le haces para cuando pones el color se va reflejando en vivo del lado derecho?

[manuelazuluaga]

Muchisimas gracias, explicaste super bien cada funcion y metodo que usasten funciona perfecto y esteticamente se ve brutal

[luciadurante]

Hace algunos días hice una calculadora con inputs, y buscaba mejorar haciendo una con botones pero que pueda entenderla, todos los tutoriales eran bastante avanzados y buscaba uno que pueda entender. Muchisimas gracias! Ya me suscribí!!!

[mauronoya]

Muy buen tutorial, al final hice muchísimas modificaciones, agregue un paréntesis un tanto complejo que seguramente cuando vea ese código dentro de unos años me voy a reír, pero quedo super funcionando así que muchas gracias, use tu video como una buena base (fue mi primera vez usando JavaScript y aprendí un montón, hasta tuve que buscar bastante información sobre el tema para poder darle funcionalidad a algunas cosas pero mucho mejor que mirar curso tras curso)

[visual.gaming]

Sos clarisimo al explicar, esta muy bueno que vayas contando que hace cada cosa que pones para que se comprenda la logica, mas con JS

[jhonatanveliz]

Muy bueno video carpi !!
Saludos.

No se por que Youtube no me está notificando sobre tus vídeos y ya active la campana, pero bueno ya estoy aquí.

[ciantinomateo]

Que buenos videos locura!
Nuevo seguidor asegurado, un capo!

[daniaprouty]

Profe gracias! Estoy aprendiendo y quiero practicar creando cosas para entender mejor el código y eres un capo! Gracias por el tutorial!

[SatroDev]

mi primer error fue que use input, y la verdad un dia para buscar el error... debía obtener el valor del botón y no el contenido.

[juanestebanramosvalderrama]

Increíble explicación. De verdad gracias bro💪💪