Curso JavaScript: 86. DOM: Ejercicios Prácticos | Cuenta Regresiva (countdown) -

En este video de ejercicios del #DOM de #JavaScript te enseño a crear una cuenta regresiva (#countdown).
💛 Aprende JavaScript aprendejavascr...
📖 Mis notas sobre JavaScript jonmircha.com/...
📖 Mis notas sobre ECMAScript jonmircha.com/...
📖 Mis notas sobre JavaScript Asíncrono jonmircha.com/...
📖 Mis notas sobre JSON jonmircha.com/...
📖 Mis notas sobre el DOM jonmircha.com/dom
📦 Códigos: github.com/jon...
🔔 Suscríbete al canal kzbin.info... 🤓
👉 Visita mi sitio web jonmircha.com/ 💻
🌮 ¿Me invítas un taco? www.paypal.me/...
🤲 Apóyame en Patreon / jonmircha
📫 Suscríbete a mi lista de correo tinyletter.com...

[@dvesc]

WOW lo loco del caso @jonmircha es que lo hice exactamente igual a ti en cuanto "arquitectura del código", la única diferencia es que mi countdown interactua con el usuario mediante un input-date (obviamente con sus validaciones), y botones para iniciar y cancelar la cuenta regresiva :3 ; De mas esta decir que eres un increíble profesor y que este es el mejor curso de programación en general que hay en español ❤️❤️❤️ -> Al final de la sección de ejercicios del DOM dejare mi proyecto con todos los ejercicios implementados pero debo comentar que le estoy dando estilos CSS a todo y esta quedando bru-talll >:D

[@manuelcobasguerra5688]

GRACIAS por este Gran Curso de Verdad Siempre lo Recomiendo y Comparto casi Todos los videos del curso Me Parece el mejor que hay en la plataforma de KZbin Saludos Desde Venezuela

[@pierreherrera6650]

Toca desearte un feliz cumpleaños hoy 23-05 y agradecerte por el curso y los conocimientos que nos brindas, desearte que la pases de lo mejor y darte las gracias nuevamente. 🎂🎂

[@jonmircha]

👋🏻😉

[@giovannyvanegas88]

Pude realizar los primeros 2 ejercicios pero este la verdad no tenia idea de como ponerlo a contar al reves. Gracias por este curso profe Jon

[@jonmircha]

😉👋🏻

[@nataliahilarion426]

Para ponerle el cero(0) antes y redondear el numero(Math.floor), yo hice una variable externa así: const transformNumber = (number) => { return number < 10 ? `0${Math.floor(number)}` : Math.floor(number); } let countdownTempo = setInterval(() => { let now = new Date().getTime() let limitTime = countdownDate - now const days = transformNumber(limitTime / (1000 * 60 * 60 * 24) ) const hours = transformNumber(limitTime % (1000 * 60 * 60 * 24) / (1000 * 60 * 60) ) const minutes = transformNumber(limitTime % (1000 * 60 * 60) / (1000 * 60) ) const seconds = transformNumber(limitTime % (1000 * 60) / (1000) )

[@mundomagupe6088]

seguimos avanzando. super

[@jonmircha]

👋🏻😉

[@MartinExequielFuraca]

Impecable Jon!

[@jonmircha]

👋🏻😉

[@HexordZX]

La verdad me sentia un poco desanimado por que no he podido tener la logica de sacar adelante los ejercicios, pero ahora puedo decir que entiendo mucho mejor la forma en que se maneja el DOM, de no saber por donde empezar ahora puedo moverle mas facilmente, aun asi no pude resolverlos por mi cuenta, pero al menos ya se como hacer una cuenta regresiva 🤣🤣

[@jonmircha]

😉👋🏻 COn calma y mucha práctica verás que iras progresando

[@DanielLozadaDev]

Joder cuánto amo este curso!

[@genecles]

Hola. Gracias por tu detallada explicación en los cálculos de los tiempos. Genial el video como siempre. Saludos desde España.

[@jonmircha]

De nada :)

[@timawid]

Me gusta mucho esta solucion ✅

[@jonmircha]

👋🏻😉

[@tongastonga22]

Gracias Joooon!!

[@jonmircha]

Gracias por ver👋🏻😉

[@braianrico4422]

Cada clase tuya es genial, mil gracias por tanto. Bemdiciones !!! 🧙‍♂️🧙‍♂️🧙‍♂️

[@jonmircha]

Mil gracias!! 🙈

[@lucasb777]

Hice mi cuenta regresiva para el mundial de Qatar. Nos vemos en la segunda fecha de la fase de grupos jon! jajaja saludos desde argentina!

[@jonmircha]

👋🏻😉

[@emersonpalaciootalvaro2632]

parcero, excelente, para que e visto muchas explicaciones en la web de js, pero tu si explicas de una forma real del lenguaje, gracias

[@joelleiva6952]

Gracias por la clase profe, quiero decir que no pude resolver el ejercicio de la cuenta regresiva, pero lo intente. Despues de ver la solucion me di cuenta, muchas gracias

[@jonmircha]

😉👍🏻

[@emersonpalaciootalvaro2632]

el colocar todos los ejemplos en el mismo html, es excelente, los ejemplos de js son muy instructivos y muy buenos gracias.

[@danielfabiani4468]

Gracias, muy bueno. Hay muchas cosas que se pueden practicar en base a esto, como que se ejecute una fn a cierta hora o que cambie el estilo de la pagina, que traiga diferentes datos de un db de acuerdo a la fecha etc, etc etc. Saludos

[@jonmircha]

👋🏻😉

[@Wiiiiizard]

🧙‍♂Muchas gracias, muy buen curso!!!

[@jonmircha]

Gracias por comentar

[@juansebastian2721]

Gracias Jon, me están gustando mucho las clases.

[@jonmircha]

😉👍🏻

[@carlosjavierorozco8418]

Este me costo terminarlo. Me gusto muchisimo muchas gracias!

[@jonmircha]

Felicidades!

[@marcosdanielromerogarcia-fx1kf]

Gran clase profesor, todo es tan didactico cuando lo explica, solo que al acabar los ejercicios me gustaria seguir practicando esto para que no se me olvide, seria buena idea que yo haga todos los retos ya sin ver el codigo

[@kikemadrigalr]

Saludos Jon, saludos compañeros. Paso a dejar mi solución a este ejercicio. Debo decir que aunque tenia clara las conversiones para días, horas, minutos, segundos. Me costo un poquito el tema de calcular a esos días la horas restantes, luego a las horas los minutos restantes y así.. Pero investigando un poco di con que el modulo ayuda con eso y pude terminarlo de buena manera.. codepen.io/kikemadrigalr/pen/MWydQKw

[@paelsam]

Lo intenté resolver por mi cuenta, pero mi lógica hizo que el la cuenta regresiva fuera un asco, me frustré bastante, pero entendí que de los errores se aprende, así que intentaré practicar nuevamente con los retos que siguen. PDT: Gracias por este gran curso, nunca cambié

[@jonmircha]

🥰🙌🏻

[@mundomagupe6088]

Oye jhon. compartiendo tus conocimiento ya nos estas ayudando mucho y el apoyo lo tienes mas que merecido, No obstante aparte de esto , que otros beneficios dices que nos puedes aportar uniéndonos a tu canal? Gracias

[@jonmircha]

En cada nivel viene la descripción de los beneficios dentro del canal cuando le das clic al boton unirse

[@ronaldm.r]

Comento demasiado lo sé, pero esto es increible jajaja me dio menos lineas de codigo que con el mismisimo moment.js

[@jonmircha]

:) Gracias por comentar

[@leonardoprone5967]

Muy útil esta clase, Jon! gracias

[@jonmircha]

Con mucho gusto

[@thaironx]

En las versiones recientes de windows 10 , para seleccionar emoticones de manera rapida . pueden apretar las teclas "windows + ." ( punto ) , espero les pueda ayudar

[@jonmircha]

Gracias por el dato :)

[@josefabianbeltranmeza6914]

jejejeje buen dato

[@matiasromera330]

🤓

[@syberiaok]

Genial! siempre me pierdo con qué cuentas hacer para obtener el tiempo, tendré que practicar más eso.

[@carloscontreras6051]

Primer ejercicio que hago sin espiar a Jon!!!! 🎆🎆

[@jonmircha]

Felicidades!😀👏🏻👏🏻👏🏻

[@Bisson156]

Genial! Gracias!

[@jonmircha]

Con gusto

[@emanuelr9815]

Genial video muchísimas gracias por la explicación!!!

[@jonmircha]

Con mucho gusto

[@victormaldonado6269]

Excelente curso, muchas gracias de nuevo. En lo que llevamos de código me surgió una duda y es ¿porqué cargamos todos loa manejadores de eventos desde el comienzo con d.addEventListener("DOMContentLoaded" ...) y porque no hicimos lo mismo para los eventos de teclado para hacer los shorcuts? ¿Cuál es la mejor práctica?

[@jonmircha]

Ambas son buenas, mientras menos Listeners, mejor

[@victormaldonado6269]

@@jonmircha Muchas gracias por responder tan rápidamente y aclarar nuestras (dudas || inquietudes) :)

[@z3r0krypt]

Quizás es un disparate o hay mejores formas de hacerlo pero mi función de cuenta atrás quedó así: (Le añadí unas líneas más para evitar que muestre los valores que son 00. Así queda más limpio y evita cosas del tipo: quedan 00 dias, 00 horas, 10 minutos y 34 segundos. const d = document; export default function cuentaAtras(id, fechaLimite, mensajeFinal) { const $contador = d.getElementById(id), fechaContador = new Date(fechaLimite).getTime(); let contadorTiempo = setInterval(() => { let tiempoAhora = new Date().getTime(), tiempoRestante = fechaContador - tiempoAhora, calculoDia = (1000 * 60 * 60 * 24), calculoHora = (1000 * 60 * 60), calculoMinuto = (1000 * 60), dias = (Math.floor(tiempoRestante / calculoDia)) + " dias,", horas = ("0" + Math.floor((tiempoRestante % calculoDia) / calculoHora)).slice(-2) + " horas,", minutos = ("0" + Math.floor((tiempoRestante % calculoHora) / calculoMinuto)).slice(-2) + " minutos", segundos = ("y " + ("0" + Math.floor((tiempoRestante % calculoMinuto) / 1000)).slice(-2)); (dias == "0 dias,") ? dias = "" : dias; (horas == "00 horas,") ? horas = "" : horas; (minutos == "00 minutos") ? minutos = "" : minutos; $contador.innerHTML = `Faltan: ${dias} ${horas} ${minutos} ${segundos} segundos`; // console.log(fechaContador, tiempoAhora, tiempoRestante); if(tiempoRestante < 0) { clearInterval(contadorTiempo); $contador.innerHTML = `${mensajeFinal}`; } }, 1000); };

[@jonmircha]

🤓👍🏻

[@alveiroceron]

Grande Jon 👏 👏

[@jonmircha]

😉🙌🏻

[@jorgerafaelcallejoflores67]

Excelente!!!!

[@Juicio87]

No me conseguí aclarar para pasar los milisegundos a días; siempre me daba 30 y algo, me di cuenta que sobraba el "3", podría haberle restado 30 al total y me salían los días pero bueno, no me gustaba hacer eso tan chapucero, miré por internet y lo tenía exactamente igual a como decían para sacar los días y nada...y ya me perdí a la hora de plantear cómo hacer la cuenta regresiva. Ya llevo un par de ejercicios que lo estoy planteando bien pero no termino de finalizarlo bien :( P.D: Pues viendo la resolución del problema, no me pasaba bien a dias los milisegundos porque yo en el argumento de la función countdown le paso la fecha deseada con el objeto new Date(), no lo paso como string...he hecho la prueba y era eso...no sé por qué...me he dado cuenta que poniéndolo en String el orden de la fecha es mes, día y año; poniéndolo con new Date()el orden es año, mes y día...no sé si tendrá algo que ver? Voy a dejar el código en CodePen por si alguien sabría decirme...me da rabia que no me saliera por este detalle pero de todo se aprende! El ejercicio está sin terminar ya que estaba haciendo estas pruebas pero se ve claramente el problema: codepen.io/Bydo/pen/GRxLaKy Como se puede ver en los días suma un 30 de más; realmente no sé por qué...tiene que ser una tontería pero no logro saber por qué

[@jonmircha]

😮😅

[@josecamilorodriguezvera8029]

Profe Jon... tengo una consulta no se si sea el único que le pasa pero a mi me está pasando... cada vez que veo un video que habla del siguiente ejercicio del DOM tengo todas las ganas de intentar de hacerlo pero después de un largo tiempo de intentarlo no puedo y me toca mirar el video para ver si por lo menos tenia la idea o no... pero después de entenderlo lo hago yo sólo pero lo que siento cuando termino de hacerlo y entenderlo es que sólo copié tu lógica y eso me frustra... es normal esto??

[@jonmircha]

Calma, con el tiempo y la práctica poco a poco lo resolveras por tí, quiza te venga bien oir este video que acabo de publicar kzbin.info/www/bejne/fGaYfYGKjJh6e5I

[@roly7409]

Misma situación

[@diegomontano9202]

como harías para combinar ese con el de la alarma digamos que le das la hora y digamos dias l m m j v y me suene alarma en esa hora y no con un botón?

[@carloscabi]

Estas dos ultimas clases no he podido hacer los ejercicios, empiezo a perder las esperanzas

[@jonmircha]

ánimo 😉👋🏻

[@federicoraulmaciasaparicio1339]

Hola profe. Dejo en este comentario la tarea del siguiente ejercicio del botón de scroll. Nuevamente menos mal que este es un curso de JavaScript y no de CSS porque si no seguro me reprobaría, jeje. Al menos el código JavaScript funciona correctamente . codepen.io/Scipio14/pen/LYGVWea

[@jonmircha]

Muy bien :)

[@oscarclaros2225]

consulta, que extensión de visual studio usan para al momento de escribir código HTML en archivo Javascript en este caso dentro de template strings les autocomplete o les sugiera la etiqueta solo con poner h3 por ejemplo o cualquier etiqueta

[@jonmircha]

no es una extensión es una configuración que tienes que agregar a tu settings.json la puedes ver en mi configuración jonmircha.com/vscode

[@oscarclaros2225]

@@jonmircha muchas gracias Profe, excelente curso

[@elweonweandolaweafome]

31:00 inspector de trastes, muestre los trastes que se escuchaban de fondo siendo lavados, Jon🍽🍴🥄🔪

[@jonmircha]

😅

[@andreslemme]

Hola Jon!!!! ESPECTACULAR tu curso!!! tengo un problemita, tengo todo igual pero cuando quiere agregar $countdown.innerHTML = `Faltan: ${days} días ${hours} horas ${minutes} minutos ${seconds} segundos`; me tira error: Uncaught ReferenceError: $countdown is not defined

[@jonmircha]

Seguramente es un error de dedo al definir el nombre de tu variable, revisa eso

[@Valery-vx8ze]

me pasa lo mismo

[@darianmorat]

Jhon, hice exactamente lo mismo que tu, pero me sale un numero negativo y llevo bastante tiempo buscando algun error pero no encuentro nada y nose que hacer....

[@jonmircha]

😮

[@MartinExequielFuraca]

Debe ser porque si colocaste la fecha de Jon, ya pasó su cumpleaños... tenes que colocar una fecha futura!

[@estebanoctaviopavezllanca2385]

Estimado muchas gracias aunque la verdad hice trampa seguí un tutorial en una pagina gringa, github.com/Stev-189/Ejercicio_DOM stev-189.github.io/Ejercicio_DOM/ Link pagina gringa github.com/Godsont/Back-To-Top-Button jajajaja Gracias profe.-

[@svsv9]

Llevo muchos anos sin programar. Lo hacia solamente para estaciones de windows. Es decir proyectos distribucion de exe, dll etc que hacia en FoxPro y Visual Studio 2005. Ahora que todo es Web, me pregunto, como y donde empezar. Obviamente HTML5, Css, y JavaScript. Pero en que tipo de proyectos necesitamos programar a puro codigo, cuando para Css ya hay un framework, tambien para Javascript, entonces cuando es que necesitamos escribir linea por linea?

[@jonmircha]

Si tienes las bases de los lenguajes, prácticamente cualquier framework y herramienta que después uses le sacarás el máximo provecho, los frameworks tienen límites, que tu puedes llevarlos más allá si conoces las tecnologías en las que están hechos.

[@svsv9]

@@jonmircha Muchas gracias por respoder, pero no aterrizo, son mas de 10 anos de no programar y nunca me gusto el mundo web. Hay algun libro que me recomiendes orientado al mundo web, o contestarias alguna llamada, es que de verdad necesito hablar con un experto para que me oriente.

[@helipalacio8772]

👨

[@ronaldm.r]

Jon tengo una duda, por cuestiones de practica hice la cuenta regresiva de una forma distinta (lo elaboré otra vez pero esta vez sin moment.js)... no utilicé el modulo sino que hice las conversiones en base a la regla de tres de las tipicas matematicas, como hago que me devuelva solo dos digitos en cada ocasion, ya sea horas, minutos, segundos, porque me da las horas y todo bien pero me da impresiones muy largas, intenté arreglarlo con los slice() pero eso no me da el resultado esperado. Esto es lo que me da al cabo de todo: 49 Días 1179 Horas 70756 Minutos 4245364 Segundos EDIT: Cuando dijo en el video que el slice con numeros negativos recorta de atrás para adelante, me dio una idea de como podría lograrlo y funcionó!! gracias jajaja

[@fernandoo]

Es porque te faltan unos paréntesis. Fíjate bien, a mí me pasó lo mismo

[@codemixer3565]

Hola jon tengo una duda existencial: Se puede hacer un temporizador de manera asincrona que aparesca en varias pantallas, se me ocurre hacer uso de local storage para guardar una variable e irla actualizando para detectarla en varias pantallas, pero no se si sea funcional, buena practica o la manera mas eficiente para que no truene, si tienes una idea de como lograr eso, seria de gran ayuda en que nos las compartieras, saludos!!!

[@jonmircha]

Para eso necesitarías websockets y programación front y back

[@tami379]

Hola! En vez de aparecerme los números en "Faltan 340 días" me aparece "Faltan NaN" y el código está igual :(

[@jonmircha]

🤔 revísalo bien seguro hay un problema de sintaxis una coma un punto una comilla algo anda mal

[@santiagotomascaci6786]

Profe como hizo para tener emmet en las template string?

[@jonmircha]

esta en mi config de VSCode jonmircha.com/vscode

[@santiagotomascaci6786]

@@jonmircha Gracias profe!

[@martinbergesio1990]

Seguimos avanzando. Este ejercicio se me dio bastante bien, tenía un código bastante parecido al tuyo. La verdad el anterior la parte de mover la bola y detectar los límites me costo mucho más. Aquí te dejo mi código de este ejercicio. github.com/Dachi90/Curso-Jon-MirCha/tree/master/Video%2080%20al%20104 Un saludo crack.

[@jonmircha]

Significa que vas progresando, muy bien :)

[@julianestebanmadridospina9615]

Muchas gracias pero me surgió un problema y es que me saca error cuando pongo la palabra default, no se por qué

[@jonmircha]

Lo tienes ejecutado desde un servidor web ??

[@julianestebanmadridospina9615]

@@jonmircha Si, estoy usando live server de visual studio code

[@YuriMayakoskiSivizaca]

Dejo mi solución al countdown: github.com/mayakoski/cursoJS-mircha/tree/master/Mircha/CursoJavaScript/dom-ejercicios y paso a revisar tu explicación

[@trovu9157]

tuve que usar chatgpt para saber como contar hacia atras 😅😅

[@jonmircha]

😅🤖

[@MaxielJohannaCamargoGomez]

Ya solo faltan 169 dias, 09 horas, 24 min y 11 segundos :)

[@jonmircha]

Para ???

[@MaxielJohannaCamargoGomez]

@@jonmircha para tu 🎂 cumpleaños

[@jonmircha]

:P

[@heimancastro1954]

🎂🎂🎂🎂🎂🎂🎂🎂🎂🎂

[@jonmircha]

😉👋🏻

[@kunjilee9810]

Aqui esta mi ejercicio!: codepen.io/Kunjo_/pen/mdrgepb?editors=1100

[@YuriMayakoskiSivizaca]

Dejo mi solución y la de Jon en un enlace en github por si alguien quiere revisar, lo cual será bien recibido, no entiendo muy bien el github, espero haber subido correctamente github.com/mayakoski/exercisesDOM/tree/6349fb57c4f14f276b0872d4b45c5dc418ab0744

[@ronaldm.r]

Y decir que utilice moment.js para esto ;-;

[@fautinocalderon]

me están cagando a palo los ejercicios JAJAJ

[@jonmircha]

🫢

[@abelsilvasantacruz9584]

Dos consultas u.u, al restar: let limitTime=new Date(Evento).getTime() - new Date(Actual).getTime() Se elimina la variación de la zona de horario? --------------------------------------------------------------------------------------------------------------- Y tambien parece que funciona de esta manera: let limitTime=new Date(Evento)-new Date() esta bien escribirlo así?

[@jonmircha]

😉👍🏻

[@johnherrera5913]

Master! Muy bueno el vídeo, gracias. Totalmente entendido.

[@jonmircha]

Excelente!