Calculator in HTML, CSS and JavaScript 😲
Рет қаралды 38,601
Күн бұрынWelcome to this new video! 👨🏽💻
I'll teach you how to get this typical project of a calculator made in HTML, CSS and JS, with all the functionalities, math operations (addition, subtraction, multiplication and division). Hope you like it!
🔗 Links
✅ Repository: github.com/carpicoder/calcula...
✅ Final result: carpicoder.github.io/calculad...
Support my content
☕ cafecito.app/carpicoder
🤙🏽 / carpicoder
Contact me
🌐 carpicoder.com
✉️ hola@carpicoder.com
Social
👨🏽💻 github.com/carpicoder
🎞️ / carpicoder
🐦 / carpicoder
⌚ Timeline
0:00 Intro
1:15 Writing HTML
4:05 Writing CSS
11:40 Writing JavaScript
23:38 Final result
24:22 Outro
@enma2813 9 ай бұрын
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;
@fedev7 Жыл бұрын
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 Жыл бұрын
Gente que le pone el alma, gracias men👍
@fedev7 Жыл бұрын
@@mauriciogiraldo4419 De nada amigo! Me alegra que te haya servido.
@MegaSpartan1998 10 ай бұрын
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 9 ай бұрын
@@MegaSpartan1998 la use igual, gracias por el tip.
@lafiebredelavainaestudio7493 5 ай бұрын
¡hola ! ¿por que cuado presiono un numero se marcan dos?
@luciadurante2996 Жыл бұрын
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í!!!
@MegaSpartan1998 10 ай бұрын
Buenísimo video hermano, todo perfectamente explicado, de verdad que eres un capo!!
@brianacosta7259 7 ай бұрын
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
@alfonsorodriguez3481 Ай бұрын
Contenido de calidad! Bien!
@Alesso_12 9 ай бұрын
Que locura en 30 minutos, vaya grande que eres gracias!
@SolaPazEnergy 8 ай бұрын
Muy buen trabajo. Gracias y saludos
@ciantinomateo8235 Жыл бұрын
Que buenos videos locura! Nuevo seguidor asegurado, un capo!
@carpicoder Жыл бұрын
Muchas gracias! Me alegra mucho que te gusten! ❤💪
@daviddavila874 7 ай бұрын
Es excelente!! Saludos!
@giselamartinez9144 4 ай бұрын
Muy buen trabajo, gracias!
@jesusmercado7313 9 ай бұрын
Muy bueno, genial tu explicación, gracias!!! 👍👍👍
@jhonatanveliz4580 Жыл бұрын
Muy bueno video carpi !! Saludos. No se por que KZfaq no me está notificando sobre tus vídeos y ya active la campana, pero bueno ya estoy aquí.
@carpicoder Жыл бұрын
Qué raro Jhonatan! Gracias por el comentario! ✨🙌🏼
@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. 👍
@mauronoya 8 ай бұрын
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 Жыл бұрын
Muy buen video 👌
@daniaprouty 6 ай бұрын
Profe gracias! Estoy aprendiendo y quiero practicar creando cosas para entender mejor el código y eres un capo! Gracias por el tutorial!
@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👍
@croire9899 9 ай бұрын
Muchas gracias aprendi mucho de tu video espero que sigas sacando mas videos asi, explicas muy bien
@finanzas374 5 ай бұрын
Me encatoa!!! por mas proyectos asi
@rafaelmas5748 10 ай бұрын
Muchísimas gracias por la explicación! excelente video
@user-rv2ty8cs2n 3 ай бұрын
Muchas gracias!! Voy a intentar hacerla !!
@kalingerr1666 4 ай бұрын
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 6 ай бұрын
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
@matimont10 9 ай бұрын
Muy buen video bro
@tomasunzue9851 Жыл бұрын
Muchas gracias por estos videos, para los que recien estamos arrancando suman un monton. Saludos !
@carpicoder Жыл бұрын
Gracias Tomás por tu comentario! Me alegra ayudarles ✨🚀
@GranateFM Жыл бұрын
Muy bueno! Muchas gracias! No sabía lo del eval.
@carpicoder Жыл бұрын
😎✨
@osvaldoaguilalafont5052 2 ай бұрын
muy buen video bro
@JoseRobertoAguilarTorales 11 күн бұрын
Buen video, fue sencillo y bien explicado
@luicelisanchez7915 11 ай бұрын
Gracias, me encanta este video, aprendí un montón.
@tzyelika2612 9 ай бұрын
exelente video amigo.
@manuelazuluaga5021 9 ай бұрын
Muchisimas gracias, explicaste super bien cada funcion y metodo que usasten funciona perfecto y esteticamente se ve brutal
@Deus-lo-Vuilt Жыл бұрын
Excelente carpi , buen tutorial!
@carpicoder Жыл бұрын
Gracias amigo! 🙌❤
@juanchirino2954 7 ай бұрын
Muy buen video y excelente explicación, muy buen ejercicio para un principiante
@kurthshad 4 ай бұрын
Gracias. Muy buen proyectito.
@cavaliershade6215 4 ай бұрын
Muy buena explicación exelente video ❤❤❤
@AlanTomasSpadari 10 ай бұрын
Muy buen video, perfectamente resumido
@maximilianoprandi8236 Жыл бұрын
Buenísimo. Codigo rapido y simple. Grscias
@mr.fabian8471 Жыл бұрын
lo que aprendí aqui en casi 25 min , increible !!
@marianoaguirre2700 Жыл бұрын
gracias carpi por tanto!!! genio hermano!!👑👑🙌
@carpicoder Жыл бұрын
💖🙌🏼✨
@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 Жыл бұрын
Muchas gracias Vane por el comentario! ❤🙌
@emmanuelstech 9 ай бұрын
Excelente tutorial!!!
@TheRealHarrinson 8 ай бұрын
muchas gracias bro me sirvió demasiado
@diegodalera3921 Жыл бұрын
Esto es oro . Muchas gracias, aprendi mas haciendo esto que leyendo decenas de tutoriales
@carpicoder Жыл бұрын
🙌💪❤
@CoDeeBot 9 ай бұрын
de los pocos que uso grid en la calculadora, que lujo
@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
@davidrendon1411 Жыл бұрын
Gran video, muy bien explicado, me sirvió para una tarea
@carpicoder Жыл бұрын
✨💪🏼🙌🏼💖
@BETTMOSH 7 ай бұрын
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.
@jorgecabrera5864 23 күн бұрын
exelente el video
@Khris14 Жыл бұрын
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
@user-hu6bf3tt2p Жыл бұрын
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
@cesarguillermoperalta Жыл бұрын
Excelente 👌
@HugoorielsoTfm Жыл бұрын
excelente, gracias por tus videos
@carpicoder Жыл бұрын
Gracias Hugo! ✨❤
@maracucho017 11 ай бұрын
sos un capo sigue asi
@javiermedina5369 3 ай бұрын
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 3 ай бұрын
Muchas gracias Javi! 🫶
@alondragadea9696 11 ай бұрын
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!!
@soportecetec2341 5 ай бұрын
Muchas gracias capo
@afmr14 2 ай бұрын
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 2 ай бұрын
Biennn. Sirve mucho empezar a agregarle cositas que el proyecto va necesitando para profundizar un poco más. Vamos pa delante! 💪🏼
@totimang 6 ай бұрын
like, me gusto la calcu!
@jilaita 10 ай бұрын
me gusta como lo explicas
@santtti7 Жыл бұрын
Gracias Carpi sos un genio
@carpicoder Жыл бұрын
Gracias Santi por el comentario! 🙌
@Nodoubthost 9 ай бұрын
sos un capo!!!!!!
@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.
@carlosvazquez_3541 2 ай бұрын
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 2 ай бұрын
Gracias Carlos por el comentario y la sugerencia! 🤝
@joaquindiaz3019 Жыл бұрын
Gooodd carpii
@carpicoder Жыл бұрын
💪✨
@miguelangelcordovaledezma6113 6 ай бұрын
excelente
@DiegoAlmeyda17 4 ай бұрын
gracias doctor
@SauloCid 7 ай бұрын
Cómo me hacías falta eval(cadena)!!!!!
@xavier6395 26 күн бұрын
bien explicado
@DeniseGarraza Жыл бұрын
Hola Carpi excelente video!! Te queria preguntar si podias hacer videitos cortos con ejercicios y resolverlos asi en vivo de Java Script, hice el curso pero me falta mcuha practica. Graciassss
@carpicoder Жыл бұрын
Hola Denise, gracias por tus comentarios de siempre! 🙌 Si tenés algunas ideítas de pequeños proyectos podés mandarme que siempre las tengo en cuenta ❤
@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
@cavaliershade6215 4 ай бұрын
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
@emanuelsotomayor2894 Жыл бұрын
¿Podrías hacer una maquetación responsive pero arrancado con mobile first? 🙏
@honeyboy_dev 6 ай бұрын
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.
@brayangarzon7732 8 ай бұрын
niceeeeee
@hugocangi6214 8 ай бұрын
hola recien me suscribi saludos vamos hacer la calculadora y te comento saludos
@raulescobar4193 3 ай бұрын
Yo tengo una duda, como podría agregar la función de raíz cuadrada y potencia?
@mr_kasz 11 ай бұрын
Hola, me sirvio de mucho tu video. Que pluggins ocupas para previsualizar el navegador desde el vscode? Saludos!
@carpicoder 11 ай бұрын
Live Preview, de Microsoft! Está entre las extensiones que podés instalar dentro de VSC!
@Alex-mn8ok Жыл бұрын
Me gustaría saber como le pongo un limite de números
@andrestoxico 23 күн бұрын
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 6 күн бұрын
Acabo de subir uno! kzfaq.info/get/bejne/rq6mZdirtdCzl3U.html
@TheKingFreezer 2 ай бұрын
Pudo hacerse con switch o sería menos práctico
@jesussanchez-ie6vu 7 ай бұрын
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
@cintia1411 9 ай бұрын
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
@samueljaramillo81 7 ай бұрын
como puedo hacerlo con numeros complejos porfa es para un proyecto de la uni ayudame porfa
@joaquindiaz3019 Жыл бұрын
Cómo te está yendo en España carpi? Muchos éxitos 💕💕✨✨
@carpicoder Жыл бұрын
Muy bien, acomodándome de a poco! Graciasss 💖✨
@elpupyremeras Жыл бұрын
@@carpicoder estoy por emigrar a españa, como programador algun consejo?
@DylanC137 11 ай бұрын
si te poodes hacer mas videos de mini proyectos para empezar, estaria muy bueno
@carpicoder 11 ай бұрын
Sugerencias, tiren sugerencias que salen!
@DylanC137 10 ай бұрын
@@carpicoder Me re sirven ejercicios para practicar javascript, siento que estoy como trabado cuando quiero hacer algo por mi cuenta
@danielvillalba1562 10 ай бұрын
muy buen video , alguien me podria decir como se hace para poder abrir la pantalla de la derecha (que vaya mostrando los resultados mientras estas codeando)
@carpicoder 10 ай бұрын
La extensión Live Preview!
@AlejandroFernandez-lr6rk Жыл бұрын
te amamos carpi.. att: tus ex grupo de alumnos de js en coder..
@carpicoder Жыл бұрын
🥹❤🙌✨
@fray9279 4 ай бұрын
brother como se llama ese programa?
@roymain8090 Жыл бұрын
De momento todo funciona, pero para la que estoy haciendo me gustaria que incluya un boton de porcentaje y de raiz. Como programo yo esos botones?
@nutella3938 10 ай бұрын
*Carpi Coder* de momento no se puede. saludos!!
@maf-sur Жыл бұрын
Hola, muy buen e instructivo video pero me parece que le faltan cosas a la calculadora. Cuando dividís ppr cero da infinito y otra cosa es que luego de darle igual acualquier ecuación, hay que borrar si o si el resultado obtenido porque si no, comienza a concatenar los números nuevos con el resultado en pantalla
@ELALBINOO 7 ай бұрын
lograste resolver esto ?
@l1br4x Жыл бұрын
te hago una consulta, como abro el html ,osea el explorador, en el visual como lo tenes vos?
@carpicoder Жыл бұрын
La extensión se llama Live Preview!
@user-vl3cn5sx5z 8 ай бұрын
Una pregunta... ¿En qué navegador lo ejecuta?... Lo que sucede es que seguí exactamente los pasos y al momento de ejecutar, no me muestra la calculadora diseñada, sino sólo los botones . Me podrían ayudar, por favor?
@carpicoder 8 ай бұрын
Hola! Fijate de estar conectando bien el archivo CSS. Este video te puede ayudar a entender eso: kzfaq.info/get/bejne/eN1jZqti3LSrhGQ.html Uso Firefox de todas formas!
@jasperez_0 Жыл бұрын
Hey! muchísimas gracias tu video fue de gran ayuda, me preguntaba si en su calculadora los números se iban fuera de la pantalla (de la calculadora) al poner cantidades altas de números o que en alguna operación salgan altas cantidades esto tiene solución? Si alguien me podría ayudar se lo agradecería muchísimo (^^ゞ
@whosdanieah 10 ай бұрын
hola una persona comento que en css display pongas overflow-x: auto;
@lafiebredelavainaestudio7493 Жыл бұрын
Recomienda e un buen curso gratis de Js please
@andreij2589 9 ай бұрын
Cual es la extension para que la web se actualice en tiempo real conforme escribes jeje?
@carpicoder 9 ай бұрын
Live Preview!
@samuelfrancogarcia9345 Жыл бұрын
carpi, qué extensión usas para ir viendo visualmente el código que escribes?
@carpicoder Жыл бұрын
Live Preview de Microsoft! La podés descargar ahí directo en VSC 🙌🏼
@samuelfrancogarcia9345 Жыл бұрын
@@carpicoder carpi, te agradezco demasiado, aprendo muchísimo
@carpicoder Жыл бұрын
@@samuelfrancogarcia9345 gracias Samuel! Me alegra un montón leerles 💖✨
@pablojuarez7476 Жыл бұрын
Carpi no subiste el ecommerce en React 😢
@carpicoder Жыл бұрын
Todavía no, la semana que viene arrancan las clases de React y vamos a ir armando un e-commerce de a poquito 👌🏼
@user-fr2hh8vd9r 7 ай бұрын
en dos patadas se hecho la calculadora mientras yo intentado varios dias
@ramirogonzalez466 Жыл бұрын
un error se puede reflejar a la hora de poner muchos números y sobresale de la calculadora
@cesaryeguez2182 Жыл бұрын
puedes jugar con el tamaño de la fuente i f (pantalla.textContent.length < 14){ pantalla.style.setProperty("font-size", "2rem"); }else if(pantalla.textContent.length > 14 && pantalla.textContent.length < 28){ pantalla.style.setProperty("font-size", "1rem"); }else if(pantalla.textContent.length > 28 && pantalla.textContent.length < 34){ pantalla.style.setProperty("font-size", ".7rem"); }else if(pantalla.textContent.length >= 34){ pantalla.textContent = "Límite alcanzado"; }
@ramirogonzalez466 Жыл бұрын
@@cesaryeguez2182 claro ahi te entiendo esta bien pero podes seguir agregando numeros una vez q salga el el mensaje la idea es q pare o q no pueda agregar mas numeros
@ramirogonzalez466 Жыл бұрын
Otro error que tambien da es que no podes multiplicar el cero por algo sale error cuando tiene q salir 0
Pablo Gallardo Dev
Рет қаралды 850