En este video te muestro como hacer una calculadora básica desde cero completamente utilizando unicamente HTML para la estructura, CSS para un poco de estilo y por último Javascript para la funcionalidad de la calculadora.
Esta calculadora puede sumar, restar, multiplicar y dividir, asi como limpiar pantalla.
Puedes ver más a detalle:
Calculadora con Javascript: https://denisseestrada.com/calculadora-con-javascript/
Calculadora con jQuery: https://jonathanmelgoza.com/blog/calculadora-con-jquery/
Gracias por suscribirte!
—————————————————————————————————
Blog personal: https://jonathanmelgoza.com/blog/
—————————————————————————————————
Sigueme en mis redes sociales:
Youtube: https://www.youtube.com/c/jonathanmelgoza
Twitter: http://www.twitter.com/jonathanmelblog
Facebook: http://www.facebook.com/jonathanmelgozablog
LinkedIn: https://mx.linkedin.com/in/jonathanmelgoza
Pinterest: https://es.pinterest.com/jonathanmelgoza/
Instagram: https://www.instagram.com/jonathan__melgoza/
Original source
50 responses to “Calculadora con Javascript, Html y CSS desde Cero”
No me funcionan los botones + – * / al precionarlos no sucede nada ayúdame por favor.
No puedo modificar la barra de resultado cuando pongo la id en span. Solo en td.
Muchas Gracias¡¡
Super! muchas gracias nueva suscripción y like!
Cómo puedo poner un numero de limite para presionar un botón?
Hola a todos, la calculadora me anda perfecto, lo hice en el editor Brackets, pero quiero enviar el documento por whatsapp y que abra en html completo cargando los códigos de CSS y JS, no se como entrelazarlos todos en un mismo archivo
Ya resolví, me tomó toda la noche del 31 de diciembre 2019
Saludos
Cuando hago click del 7 en adelante no me aparece el número que click quedo.
no me va el .calculadora
como es que te deja acceder a la variable resultado si no es global
No entiendo por que la funcion init tiene que cargarse en el body con un onload… no me carga y me dice error de sintax.
Mexico, Mexico … te llevo en el corazoooooonnnnn! Gracias, mi pana!
Muchas gracias, Jonathan. Me ha servido para aprender a crear una carculadora sencilla en base a HTML5, CSS3 y Javascript.
Saludos!
no hay manera de que salga nada en la zona de resultado
Omg este vídeo me ha solucionado la vida, tenía que hacer algo similar para clase y no sabía ni por donde empezar, si hacer un grid o una tabla o si usar botones o coordenadas. Muchísisimas gracias <3
Al momento de seleccionar los botones no me aparece nada en la parte del resultado, ¿Qué puedo hacer?
Excelente clase, sencillo, rápido, muy entendido, Muchísima gracias, ya aprendí hacer calculadora.
como puedo añadirle un boton de raiz cuadrada?
Muy claro y conciso !! Gracias compañero!!!
según yo, tengo todo en orden y bien escrito, pero con xampp, sólo me detecta lo escrito en el index.html, ya revicé y si tengo bien la unión al css y al js, si lo abro desde "ctrl + o" ahí sí se ve bien el css, y me funcionaba bien el js, después de terminar de agregar los eventos y empezar con las funciones, ya no se refleja en mi pantalla, incluso cambié el símbolo de multipilar (del "x" a "*" porque yo lo había empezado con "x", nomás porque sí) y eso ni se cambió en la pantalla, me sigue apareciendo el "x", no sé que pex:(
si tengo la carpeta de la calculadora en htdocs
nop
Me salió a la perfección. Muchas gracias y muy claro.
Porque pusiste function(e)?
como haces para aparecer todos los componentes sin tener que copiar y pegar código en el Minuto 19:47
Brooo respondee
No me aparecen los numeros cuando le doy click.. Y lo hice exactamente como tu.
Emm tengo un problema a mi los números no se me escriben y tengo la programacion identica a la del video por q pasara?
GRACIAS!!! me sirvió de mucha ayuda
no quieres funcionar las operaciones :c … no me sale nada cuando presionar el boton sumar o restar o multiplicar o dividir
Mutación obligada. Contribuyó mucho. ¡Excelente vídeo!
no me funciono los codigos de ninguna de las 2 paginas de la descripcion en ambos los botones no hacen nada
ne fonctionne pas la partie de JavaScript s'il vous plaît aider, les numéros n'apparaissent pas dans la zone de texte
Muy bueno!!! me re sirvio.. Gracias!!!
Ayudaaa, no me sirve el igual
Muchas gracias, ha sido de mucha ayuda
El titulo dice desde cero, pero no explicas bien pones varias etiquetas y no explicas su funcionalidad
hola mira no me da el js espero que me respondas saludos 🙂
podria hacer un ejemplo con delegacion de eventos
Excelente vídeo, me ayudo mucho en un trabajo que necesitaba. Aunque yo no hice cada operación, sino que use la operación eval() que posee Javascript.
Muchas gracias por el video, gracias a tu video pude completar para que mi calculadora pudiera hacer las operaciones: https://codepen.io/Richarchg/pen/YdRGRW
no me funciono
Como se llama el programa?
muy buen video like y sub
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
tengo un problema y es que a la hora de hacer los eventos si hago click en cualquier botón no me aparece luego en la caja de resultado. Alguien sabe por qué es??
un likassOh
Me quede atorado en los eventos , cuando le doy click a los botones , no me aparece nada en la pantalla de la calculadora, Alguien puede tneer una idea porque?
Hice que Init me cargara sin ningun problema cuando hice la prueba del " Hola Mundo" pero ahora que estoy haciendo eventos para los botones y que aparezcan en la calculadora , es como si no tomara los numeros que puse .
no me salio me salio distorcionado a los que les salga distorcionado pongan este codigo en estilo.css
.calculadora{
display:block;
margin:0 auto;
padding:20px;
background-color: #DC4C46;
width:350px;
height:500px;
border-radius: 25px;
}
.calculadora td button{
display:block;
width:60px;
height:60px;
font-size:25px;
}
#resultado{
display: block;
text-align:center;
font-size: 40px;
margin-bottom: 50px;
width: 300px;
height: 100px;
line-height: 100px;
background: #fff;
border-radius: 25px;
overflow-y: scroll;
}
Si lo haces con CSS Grid es bastante más rápido.
Salio muy bien… gracias amigo… solo que en lugar de case, yo use if… pero sale lo mismo bien… de 10 el video…