Calculator in HTML, CSS and JavaScript 😲

แชร์
ฝัง
  • เผยแพร่เมื่อ 6 ม.ค. 2025

ความคิดเห็น • 166

  • @fedev7
    @fedev7 ปีที่แล้ว +43

    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!

    • @mauriciogiraldo4419
      @mauriciogiraldo4419 ปีที่แล้ว +4

      Gente que le pone el alma, gracias men👍

    • @fedev7
      @fedev7 ปีที่แล้ว

      @@mauriciogiraldo4419 De nada amigo! Me alegra que te haya servido.

    • @MegaSpartan1998
      @MegaSpartan1998 ปีที่แล้ว +8

      Hola, en mi caso preferí utilizar la propiedad "word-wrap: break-word;" ahí mismo en el div de la pantalla, lo que hace es que automáticamente pasan los números abajo y se alarga automáticamente el div de la pantalla, se me hizo más estético y funcional :D

    • @TechVision1969
      @TechVision1969 ปีที่แล้ว +1

      @@MegaSpartan1998 la use igual, gracias por el tip.

    • @lafiebredelavainaestudio7493
      @lafiebredelavainaestudio7493 11 หลายเดือนก่อน

      ¡hola ! ¿por que cuado presiono un numero se marcan dos?

  • @enma2813
    @enma2813 ปีที่แล้ว +16

    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;

  • @juanpablobarber8036
    @juanpablobarber8036 5 หลายเดือนก่อน

    la verdad explicas muy bien loco, primero video q veo, voy a investigar tu canal. vas directo al grano, haciendo de una y sobre todo lees muy bien las lineas, osea vas leyendo el codigo pero (con la logica) no tanto tecnico en las palabras, sirve mucho

  • @Alesso_12
    @Alesso_12 ปีที่แล้ว +1

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

  • @juanestebanramosvalderrama
    @juanestebanramosvalderrama 2 หลายเดือนก่อน

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

  • @diegodalera3921
    @diegodalera3921 ปีที่แล้ว +5

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

  • @malejo93
    @malejo93 3 หลายเดือนก่อน

    ¡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
    @Dreez-gg 4 หลายเดือนก่อน

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

  • @brianacosta7259
    @brianacosta7259 ปีที่แล้ว

    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

  • @kalingerr1666
    @kalingerr1666 11 หลายเดือนก่อน

    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

  • @visual.gaming
    @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

  • @mauronoya
    @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)

  • @estefanycontrerasborda2029
    @estefanycontrerasborda2029 ปีที่แล้ว +2

    Muy buen video 👌

  • @ciantinomateo8235
    @ciantinomateo8235 ปีที่แล้ว

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

    • @carpicoder
      @carpicoder  ปีที่แล้ว

      Muchas gracias! Me alegra mucho que te gusten! ❤💪

  • @mauriciogiraldo4419
    @mauriciogiraldo4419 ปีที่แล้ว

    Muchas gracias men, excelente explicación para mi segunda experiencia con JavaScript, me ayudaste mucho y lo mas importante es que entendí lo que estaba programando, me falto el botón de % pero, se lo incorporare y buscare la forma de hacerlo funcionar, saludos desde Colombia👍

  • @oscarboccuti1081
    @oscarboccuti1081 4 หลายเดือนก่อน

    Gracias maestroooooo, fenomeno!

  • @jhonatanveliz4580
    @jhonatanveliz4580 ปีที่แล้ว

    Muy bueno video carpi !!
    Saludos.
    No se por que TH-cam no me está notificando sobre tus vídeos y ya active la campana, pero bueno ya estoy aquí.

    • @carpicoder
      @carpicoder  ปีที่แล้ว

      Qué raro Jhonatan! Gracias por el comentario! ✨🙌🏼

  • @daniaprouty
    @daniaprouty ปีที่แล้ว

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

  • @MegaSpartan1998
    @MegaSpartan1998 ปีที่แล้ว

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

  • @alfonsorodriguez3481
    @alfonsorodriguez3481 8 หลายเดือนก่อน

    Contenido de calidad! Bien!

  • @luciadurante2996
    @luciadurante2996 ปีที่แล้ว +3

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

  • @tomasunzue9851
    @tomasunzue9851 ปีที่แล้ว

    Muchas gracias por estos videos, para los que recien estamos arrancando suman un monton. Saludos !

    • @carpicoder
      @carpicoder  ปีที่แล้ว +1

      Gracias Tomás por tu comentario! Me alegra ayudarles ✨🚀

  • @leokratoschief1853
    @leokratoschief1853 6 หลายเดือนก่อน

    el mejor video practico en cuanto a la logica , yo lo hacia la vieja confiable por con switch concatener el operador y llamar con funciones

  • @manuelazuluaga5021
    @manuelazuluaga5021 ปีที่แล้ว

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

  • @luiscrespol8640
    @luiscrespol8640 5 หลายเดือนก่อน

    Buen video... todo sencillo el html, css y sobre todo la logica. Muy simple todo, pero funciona para el principiante en esto. La sugerencia seria implementar la calculadora cientifica para la version 2 y para la version 3 el poder graficar funciones. Gracias x el aporte!

  • @daviddavila874
    @daviddavila874 ปีที่แล้ว

    Es excelente!! Saludos!

  • @afmr14
    @afmr14 8 หลายเดือนก่อน

    muchas gracias, la hice al pie de la letra, luego hice unos ajustes, pero antes de hacerlos notè que los numeros largos salian de la pantalla, asì que agreguè un overflow pero me hubiese gustado que tuviera los puntos de unidad, decena, centena y coma de millòn. Estoy muy agradecida con tu video, un abrazo

    • @carpicoder
      @carpicoder  8 หลายเดือนก่อน +1

      Biennn. Sirve mucho empezar a agregarle cositas que el proyecto va necesitando para profundizar un poco más. Vamos pa delante! 💪🏼

  • @vicentegeonix
    @vicentegeonix ปีที่แล้ว

    No se como decirlo, pero me encanto y me fascina la forma en que lo explicaste el proyecto sin duda espero que sigas haciendo tutoriales y demás, muchas gracias. 👍

  • @jesusmercado7313
    @jesusmercado7313 ปีที่แล้ว

    Muy bueno, genial tu explicación, gracias!!! 👍👍👍

  • @giselamartinez9144
    @giselamartinez9144 10 หลายเดือนก่อน

    Muy buen trabajo, gracias!

  • @aless-hi
    @aless-hi 4 หลายเดือนก่อน

    ERES UN CAPO MUCHAS GRACIAS

  • @cavaliershade6215
    @cavaliershade6215 10 หลายเดือนก่อน

    Muy buena explicación exelente video ❤❤❤

  • @mr.fabian8471
    @mr.fabian8471 ปีที่แล้ว

    lo que aprendí aqui en casi 25 min , increible !!

  • @CoDeeBot
    @CoDeeBot ปีที่แล้ว

    de los pocos que uso grid en la calculadora, que lujo

  • @marianoaguirre2700
    @marianoaguirre2700 ปีที่แล้ว

    gracias carpi por tanto!!! genio hermano!!👑👑🙌

  • @3434erer
    @3434erer 2 หลายเดือนก่อน

    Impresionante lo que simplifica la funcion eval(). yo estaba haciendo un if por cada simbolo, + - %.

  • @carlosvazquez_3541
    @carlosvazquez_3541 9 หลายเดือนก่อน +1

    Llevo mucho tiempo intentando ver un tutorial que funcione y tenga mucha logica y desde luego el tuyo es el mejor, la gente se complica mucho tu lo haces con una logica muy facil de entender lo cual me gusta pero te falto una opcion que e la de si divides 98760 o cualquier numero grande entre 0 sale infinity para lo cual habria que hacer lo mismo que con el error pero con infinity. Buenisimo el video

    • @carpicoder
      @carpicoder  9 หลายเดือนก่อน +1

      Gracias Carlos por el comentario y la sugerencia! 🤝

    • @c-danieltorres1001
      @c-danieltorres1001 2 หลายเดือนก่อน

      Bro, encontraste alguna solución para ese error, no he logrado quitar ese error me gustaria que me ayudaras de ser posible

  • @javiermedina5369
    @javiermedina5369 9 หลายเดือนก่อน

    eres genial Carpi, te han dicho que eres un Excelente Maestro? pues me imagino que si y yo lo recalco muchas gracias por tu aportación!!

    • @carpicoder
      @carpicoder  9 หลายเดือนก่อน

      Muchas gracias Javi! 🫶

  • @croire9899
    @croire9899 ปีที่แล้ว

    Muchas gracias aprendi mucho de tu video espero que sigas sacando mas videos asi, explicas muy bien

  • @vanesanchez5578
    @vanesanchez5578 ปีที่แล้ว

    hola! buenísimo! Estoy aprendiendo Js con ejercicios, y el tu calculadora es sencilla y bien explicada. Tienes una sub más. :D

    • @carpicoder
      @carpicoder  ปีที่แล้ว

      Muchas gracias Vane por el comentario! ❤🙌

  • @SolaPazEnergy
    @SolaPazEnergy ปีที่แล้ว

    Muy buen trabajo. Gracias y saludos

  • @MariaCelesteBarrios-x8j
    @MariaCelesteBarrios-x8j 9 หลายเดือนก่อน

    Muchas gracias!! Voy a intentar hacerla !!

  • @matimont10
    @matimont10 ปีที่แล้ว

    Muy buen video bro

  • @finanzas374
    @finanzas374 11 หลายเดือนก่อน

    Me encatoa!!! por mas proyectos asi

  • @rafaelmas5748
    @rafaelmas5748 ปีที่แล้ว

    Muchísimas gracias por la explicación! excelente video

  • @juanchirino2954
    @juanchirino2954 ปีที่แล้ว

    Muy buen video y excelente explicación, muy buen ejercicio para un principiante

  • @JoseRobertoAguilarTorales
    @JoseRobertoAguilarTorales 6 หลายเดือนก่อน

    Buen video, fue sencillo y bien explicado

  • @BETTMOSH
    @BETTMOSH ปีที่แล้ว

    todo perfecto y bien explicado felicidades, salvo que no pusiste el limite de digitaciones ya que se sale de la pantalla las veces que le des a un numero.... saludos.

  • @luColibrí-z3f
    @luColibrí-z3f ปีที่แล้ว

    Gracias, me encanta este video, aprendí un montón.

  • @GranateFM
    @GranateFM ปีที่แล้ว

    Muy bueno! Muchas gracias! No sabía lo del eval.

  • @davidrendon1411
    @davidrendon1411 ปีที่แล้ว

    Gran video, muy bien explicado, me sirvió para una tarea

    • @carpicoder
      @carpicoder  ปีที่แล้ว +1

      ✨💪🏼🙌🏼💖

  • @tzyelika2612
    @tzyelika2612 ปีที่แล้ว

    exelente video amigo.

  • @TheRealHarrinson
    @TheRealHarrinson ปีที่แล้ว

    muchas gracias bro me sirvió demasiado

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt ปีที่แล้ว

    Excelente carpi , buen tutorial!

    • @carpicoder
      @carpicoder  ปีที่แล้ว

      Gracias amigo! 🙌❤

  • @osw2050
    @osw2050 9 หลายเดือนก่อน

    muy buen video bro

  • @AlanTomasSpadari
    @AlanTomasSpadari ปีที่แล้ว

    Muy buen video, perfectamente resumido

  • @kurthshad
    @kurthshad 10 หลายเดือนก่อน

    Gracias. Muy buen proyectito.

  • @maracucho017
    @maracucho017 ปีที่แล้ว

    sos un capo sigue asi

  • @Minato542-y7s
    @Minato542-y7s หลายเดือนก่อน

    Por qué al poner los código de css, color y etc, no sé ve en open with left server(los botones de html si)

  • @jorgecabrera5864
    @jorgecabrera5864 7 หลายเดือนก่อน

    exelente el video

  • @maximilianoprandi8236
    @maximilianoprandi8236 ปีที่แล้ว

    Buenísimo. Codigo rapido y simple. Grscias

  • @jhonalexanderbobadillalomb6793
    @jhonalexanderbobadillalomb6793 4 หลายเดือนก่อน

    Grande profe

  • @totimang
    @totimang ปีที่แล้ว

    like, me gusto la calcu!

  • @soportecetec2341
    @soportecetec2341 11 หลายเดือนก่อน

    Muchas gracias capo

  • @emmanuelstech
    @emmanuelstech ปีที่แล้ว

    Excelente tutorial!!!

  • @cesarguillermoperalta
    @cesarguillermoperalta ปีที่แล้ว

    Excelente 👌

  • @Khris14
    @Khris14 ปีที่แล้ว +2

    Una buena forma de aprender es antes de ver todo el video y copiar, darle un poco al bocho para ver si pueden solucionarlo ustedes, exitos y buen video

  • @robertosandoval2820
    @robertosandoval2820 3 หลายเดือนก่อน

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

  • @HugoorielsoTfm
    @HugoorielsoTfm ปีที่แล้ว

    excelente, gracias por tus videos

    • @carpicoder
      @carpicoder  ปีที่แล้ว

      Gracias Hugo! ✨❤

  • @LucíaSilvaCórdoba
    @LucíaSilvaCórdoba ปีที่แล้ว

    Hola! como estás? ME encantó y siguiendo tu tutorial construi la mia! Ahora bien, la división entre 0 no la has considerado y debe ser un error en el display de la calculadora.
    Gracias por enseñarme a hacer esto

    • @soportemqmgld
      @soportemqmgld 2 หลายเดือนก่อน

      Lograste encontrar una solución a ese error?
      me ayudarías demasiado con eso

  • @jesussanchez-ie6vu
    @jesussanchez-ie6vu ปีที่แล้ว

    Hola soy nuevo estoy tratando de hacer el mismo proyecto pero mi carpeta de main. Css no se depura en la página la de index. Html si peeo la de Css no nesesito ayuda y también no me sale el símbolo de númeral en Css sino el logo de css yo creo que es que no está bien vinculada con la de index pero los pasos están iguales a los de los video

  • @jilaita
    @jilaita ปีที่แล้ว

    me gusta como lo explicas

  • @raulescobar4193
    @raulescobar4193 10 หลายเดือนก่อน

    Yo tengo una duda, como podría agregar la función de raíz cuadrada y potencia?

  • @pOder969
    @pOder969 5 หลายเดือนก่อน

    ¿cual es el nombre de la extencion que usas para la visualizacion oh resultado del codigo? (la pantalla del lado derecho)

  • @lizardfreak3170
    @lizardfreak3170 ปีที่แล้ว

    Hola, muchas gracias por el video, tengo el live preview pero no me visualiza lo que haga en css, aparece todo sin estilo, tengo bien puesta la ruta al css desde el html.

  • @SatroDev
    @SatroDev ปีที่แล้ว +1

    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.

  • @eliascasales1614
    @eliascasales1614 3 หลายเดือนก่อน

    muy buen video, muy bien explicado!! tuve un pequeño problema y es que no me ejecuta el js..... le busque todas las soluciones posibles pero no le encuentro como resolverlo, el error que me aparece es justo en un "else", me aparece: "se esperaba una declaración o una instrucción.ts(1128)"....agradeceria mucho tu ayuda, desde ya muchas gracias

  • @alondragadea9696
    @alondragadea9696 ปีที่แล้ว

    Holaa, muy buen videoo, solo una pequeña observación. La funcion eval que utilizas para realizar las operaciones podría generarle un problema de seguridad a tu pagina. Puedes verlo en google. Gracias por el video!!

  • @santiyelmini
    @santiyelmini ปีที่แล้ว

    Gracias Carpi sos un genio

    • @carpicoder
      @carpicoder  ปีที่แล้ว

      Gracias Santi por el comentario! 🙌

  • @andrestoxico
    @andrestoxico 7 หลายเดือนก่อน

    agradecería un video de atajos, como por ejemplo, como hiciste para duplicar button, o como dese un comando se puede cambiar todas las variables de un mismo nombre

    • @carpicoder
      @carpicoder  6 หลายเดือนก่อน

      Acabo de subir uno! th-cam.com/video/xHv2uzPjOgA/w-d-xo.html

  • @cintia1411
    @cintia1411 ปีที่แล้ว

    Muchas gracias, me sirvio, pero encontre un pequeño error. Cuando hago una operacion que da error y le vuelvo a dar click en igual (osea dos clicks seguidos) me sale function Error(){[native code]}. Intente solucionarlo poniendo otro condicional en la ultima parte del codigo, pero no funciona. No se como solucionarlo

  • @miguelangelcordovaledezma6113
    @miguelangelcordovaledezma6113 ปีที่แล้ว

    excelente

  • @samueljaramillo81
    @samueljaramillo81 ปีที่แล้ว

    como puedo hacerlo con numeros complejos porfa es para un proyecto de la uni ayudame porfa

  • @DiegoAlmeyda17
    @DiegoAlmeyda17 11 หลายเดือนก่อน

    gracias doctor

  • @xavier6395
    @xavier6395 7 หลายเดือนก่อน

    bien explicado

  • @SauloCid
    @SauloCid ปีที่แล้ว

    Cómo me hacías falta eval(cadena)!!!!!

  • @kyulakyu
    @kyulakyu ปีที่แล้ว

    se agradece el aporte, pero hay una falla por decirlo así, como podría poner que después de mostrar el resultado, no me deje agregar mas dígitos al resultado y al hacerlo que se reinicie la calculadora

  • @TheKingFreezer
    @TheKingFreezer 8 หลายเดือนก่อน

    Pudo hacerse con switch o sería menos práctico

  • @Alex-mn8ok
    @Alex-mn8ok ปีที่แล้ว

    Me gustaría saber como le pongo un limite de números

  • @joaquindiaz3019
    @joaquindiaz3019 ปีที่แล้ว

    Gooodd carpii

  • @cavaliershade6215
    @cavaliershade6215 10 หลายเดือนก่อน

    Hola Carpi espero tengas un buen día el proyecto lo hice y me funciono muy bien pero le falto algo cuando divides un número y el resultado no es entero te aroma mucho decimales y se sale de la pantalla de la calculadora se ven por fuera

  • @cristiancanelo7016
    @cristiancanelo7016 3 หลายเดือนก่อน

    Hola he intentado hacer el código y por alguna razón no me diseña la pagina. Estoy indexando algo mal en css?


    Calculadora


    0
    C

    /
    *
    7
    8
    9
    -
    4
    5
    6
    +
    1
    2
    3
    =
    0
    .

  • @brayangarzon7732
    @brayangarzon7732 ปีที่แล้ว

    niceeeeee

  • @mr_kasz
    @mr_kasz ปีที่แล้ว

    Hola, me sirvio de mucho tu video. Que pluggins ocupas para previsualizar el navegador desde el vscode? Saludos!

    • @carpicoder
      @carpicoder  ปีที่แล้ว

      Live Preview, de Microsoft! Está entre las extensiones que podés instalar dentro de VSC!

  • @Nodoubthost
    @Nodoubthost ปีที่แล้ว

    sos un capo!!!!!!

  • @Caasizechnsanzerimar123
    @Caasizechnsanzerimar123 หลายเดือนก่อน

    una pregunta porque me da error con java ?

  • @AlejandroFernandez-lr6rk
    @AlejandroFernandez-lr6rk ปีที่แล้ว

    te amamos carpi..
    att: tus ex grupo de alumnos de js en coder..

  • @l1br4x
    @l1br4x ปีที่แล้ว

    te hago una consulta, como abro el html ,osea el explorador, en el visual como lo tenes vos?

    • @carpicoder
      @carpicoder  ปีที่แล้ว

      La extensión se llama Live Preview!

  • @joaquindiaz3019
    @joaquindiaz3019 ปีที่แล้ว

    Cómo te está yendo en España carpi? Muchos éxitos 💕💕✨✨

    • @carpicoder
      @carpicoder  ปีที่แล้ว

      Muy bien, acomodándome de a poco! Graciasss 💖✨

    • @elpupyremeras
      @elpupyremeras ปีที่แล้ว

      @@carpicoder estoy por emigrar a españa, como programador algun consejo?

  • @hugocangi6214
    @hugocangi6214 ปีที่แล้ว

    hola recien me suscribi
    saludos vamos hacer la calculadora y te comento
    saludos