• Tuesday , 31 March 2020

Calculadora con Javascript, Html y CSS desde Cero

Code Canyon



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

3d Ocean

Related Posts

50 Comments

  1. Daniel Camilo Páez
    February 20, 2020 at 05:54

    No me funcionan los botones + – * / al precionarlos no sucede nada ayúdame por favor.

  2. Harvard University
    February 20, 2020 at 05:54

    No puedo modificar la barra de resultado cuando pongo la id en span. Solo en td.

  3. Veronica Rangel
    February 20, 2020 at 05:54

    Muchas Gracias¡¡

  4. 333 Avatar
    February 20, 2020 at 05:54

    Super! muchas gracias nueva suscripción y like!

  5. v1TaL
    February 20, 2020 at 05:54

    Cómo puedo poner un numero de limite para presionar un botón?

  6. WALTER CAMBARERI
    February 20, 2020 at 05:54

    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

  7. Julio Silverio
    February 20, 2020 at 05:54

    Ya resolví, me tomó toda la noche del 31 de diciembre 2019

  8. Julio Silverio
    February 20, 2020 at 05:54

    Saludos
    Cuando hago click del 7 en adelante no me aparece el número que click quedo.

  9. slay
    February 20, 2020 at 05:54

    no me va el .calculadora

  10. P.I.M.P Cruz Barajas
    February 20, 2020 at 05:54

    como es que te deja acceder a la variable resultado si no es global

  11. Ricardo Tovar
    February 20, 2020 at 05:54

    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.

  12. Ricardo Tovar
    February 20, 2020 at 05:54

    Mexico, Mexico … te llevo en el corazoooooonnnnn! Gracias, mi pana!

  13. Janiel Medina Gómez
    February 20, 2020 at 05:54

    Muchas gracias, Jonathan. Me ha servido para aprender a crear una carculadora sencilla en base a HTML5, CSS3 y Javascript.

    Saludos!

  14. Susana Camara
    February 20, 2020 at 05:54

    no hay manera de que salga nada en la zona de resultado

  15. Carmen Sirgo
    February 20, 2020 at 05:54

    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

  16. Elena Perez
    February 20, 2020 at 05:54

    Al momento de seleccionar los botones no me aparece nada en la parte del resultado, ¿Qué puedo hacer?

  17. QuickBooks Sistema Contable y Punto de Ventas
    February 20, 2020 at 05:54

    Excelente clase, sencillo, rápido, muy entendido, Muchísima gracias, ya aprendí hacer calculadora.

  18. J Valencia
    February 20, 2020 at 05:54

    como puedo añadirle un boton de raiz cuadrada?

  19. D-land Arrese Valle
    February 20, 2020 at 05:54

    Muy claro y conciso !! Gracias compañero!!!

  20. orlando lucero
    February 20, 2020 at 05:54

    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

  21. Dina Bosa
    February 20, 2020 at 05:54

    nop

  22. Marcelo B
    February 20, 2020 at 05:54

    Me salió a la perfección. Muchas gracias y muy claro.

  23. Loading7u7r -
    February 20, 2020 at 05:54

    Porque pusiste function(e)?

  24. Carlos Sánchez
    February 20, 2020 at 05:54

    como haces para aparecer todos los componentes sin tener que copiar y pegar código en el Minuto 19:47

  25. Jhoan Rodríguez
    February 20, 2020 at 05:54

    Brooo respondee

  26. Jhoan Rodríguez
    February 20, 2020 at 05:54

    No me aparecen los numeros cuando le doy click.. Y lo hice exactamente como tu.

  27. hery amaya
    February 20, 2020 at 05:54

    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?

  28. Ronaldo Carhualloclla
    February 20, 2020 at 05:54

    GRACIAS!!! me sirvió de mucha ayuda

  29. Marcos José Fasanando
    February 20, 2020 at 05:54

    no quieres funcionar las operaciones :c … no me sale nada cuando presionar el boton sumar o restar o multiplicar o dividir

  30. DAIANE MARIA SANTOS PIRES
    February 20, 2020 at 05:54

    Mutación obligada. Contribuyó mucho. ¡Excelente vídeo!

  31. InfToonlink
    February 20, 2020 at 05:54

    no me funciono los codigos de ninguna de las 2 paginas de la descripcion en ambos los botones no hacen nada

  32. Mouse
    February 20, 2020 at 05:54

    ne fonctionne pas la partie de JavaScript s'il vous plaît aider, les numéros n'apparaissent pas dans la zone de texte

  33. Matias Fragazzini
    February 20, 2020 at 05:54

    Muy bueno!!! me re sirvio.. Gracias!!!

  34. German 200292TM シ avr
    February 20, 2020 at 05:54

    Ayudaaa, no me sirve el igual

  35. Alberto
    February 20, 2020 at 05:54

    Muchas gracias, ha sido de mucha ayuda

  36. Danny Carra
    February 20, 2020 at 05:54

    El titulo dice desde cero, pero no explicas bien pones varias etiquetas y no explicas su funcionalidad

  37. Jose Manuel Arboleda Oviedo
    February 20, 2020 at 05:54

    hola mira no me da el js espero que me respondas saludos 🙂

  38. Carlos Peña
    February 20, 2020 at 05:54

    podria hacer un ejemplo con delegacion de eventos

  39. Bryan A. Lopez G.
    February 20, 2020 at 05:54

    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.

  40. richar chinchilla gomez
    February 20, 2020 at 05:54

    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

  41. bato rodriguez
    February 20, 2020 at 05:54

    no me funciono

  42. Miezeber Miqueber
    February 20, 2020 at 05:54

    Como se llama el programa?

  43. Xx-_Maye_-xX
    February 20, 2020 at 05:54

    muy buen video like y sub

  44. JoLix
    February 20, 2020 at 05:54

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <body>

    </body>
    </html>

  45. Alvaro Aparicio
    February 20, 2020 at 05:54

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

  46. AbreY S. ParKa
    February 20, 2020 at 05:54

    un likassOh

  47. Blackyonbi Kage
    February 20, 2020 at 05:54

    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 .

  48. Jmata4073
    February 20, 2020 at 05:54

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

  49. Aitor Tilla
    February 20, 2020 at 05:54

    Si lo haces con CSS Grid es bastante más rápido.

  50. HUGO LUIS Villa
    February 20, 2020 at 05:54

    Salio muy bien… gracias amigo… solo que en lugar de case, yo use if… pero sale lo mismo bien… de 10 el video…

Leave A Comment

You must be logged in to post a comment.