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

Поділитися
Вставка
  • Опубліковано 14 гру 2024

КОМЕНТАРІ • 130

  • @dvesc
    @dvesc 4 роки тому +8

    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

  • @Wiiiiizard
    @Wiiiiizard 2 роки тому +1

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

  • @manuelcobasguerra5688
    @manuelcobasguerra5688 4 роки тому +17

    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 UA-cam Saludos Desde Venezuela

  • @giovannyvanegas88
    @giovannyvanegas88 Рік тому +2

    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

  • @mundomagupe6088
    @mundomagupe6088 2 роки тому +1

    seguimos avanzando. super

  • @nataH31
    @nataH31 2 роки тому +2

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

  • @MartinExequielFuraca
    @MartinExequielFuraca 2 роки тому +1

    Impecable Jon!

  • @DanielLozadaDev
    @DanielLozadaDev 4 роки тому +3

    Joder cuánto amo este curso!

  • @carlosjavierorozco8418
    @carlosjavierorozco8418 2 роки тому +1

    Este me costo terminarlo. Me gusto muchisimo muchas gracias!

  • @genecles
    @genecles 4 роки тому +4

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

  • @emersonpalaciootalvaro2632
    @emersonpalaciootalvaro2632 4 роки тому +2

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

  • @braianrico4422
    @braianrico4422 3 роки тому +2

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

  • @timawid
    @timawid Рік тому +1

    Me gusta mucho esta solucion ✅

  • @tongastonga22
    @tongastonga22 11 місяців тому +1

    Gracias Joooon!!

    • @jonmircha
      @jonmircha  11 місяців тому +1

      Gracias por ver👋🏻😉

  • @juansebastian2721
    @juansebastian2721 2 роки тому +1

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

  • @danielfabiani4468
    @danielfabiani4468 2 роки тому +1

    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

  • @joelleiva6952
    @joelleiva6952 2 роки тому +1

    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

  • @emersonpalaciootalvaro2632
    @emersonpalaciootalvaro2632 4 роки тому +1

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

  • @pierreherrera6650
    @pierreherrera6650 6 місяців тому

    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. 🎂🎂

  • @Bisson156
    @Bisson156 3 роки тому +1

    Genial! Gracias!

  • @HexordZX
    @HexordZX 2 роки тому +5

    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
      @jonmircha  2 роки тому +5

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

  • @johnherrera5913
    @johnherrera5913 3 роки тому

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

  • @emanuelr9815
    @emanuelr9815 3 роки тому

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

  • @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
    @kikemadrigalr 4 роки тому +2

    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

  • @alveiroceron
    @alveiroceron 3 роки тому

    Grande Jon 👏 👏

  • @syberiaok
    @syberiaok 3 роки тому

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

  • @paelsam
    @paelsam 2 роки тому +1

    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é

  • @mundomagupe6088
    @mundomagupe6088 2 роки тому

    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
      @jonmircha  2 роки тому

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

  • @jorgerafaelcallejoflores67
    @jorgerafaelcallejoflores67 4 роки тому +1

    Excelente!!!!

  • @lucasb777
    @lucasb777 2 роки тому +1

    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!

  • @thaironx
    @thaironx 4 роки тому +7

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

  • @ronaldm.r
    @ronaldm.r 4 роки тому +2

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

    • @jonmircha
      @jonmircha  4 роки тому

      :) Gracias por comentar

  • @oscarclaros2225
    @oscarclaros2225 3 роки тому +2

    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
      @jonmircha  3 роки тому +1

      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
      @oscarclaros2225 3 роки тому

      @@jonmircha muchas gracias Profe, excelente curso

  • @carloscontreras6051
    @carloscontreras6051 3 роки тому

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

    • @jonmircha
      @jonmircha  3 роки тому

      Felicidades!😀👏🏻👏🏻👏🏻

  • @victormaldonado6269
    @victormaldonado6269 4 роки тому +2

    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
      @jonmircha  4 роки тому +2

      Ambas son buenas, mientras menos Listeners, mejor

    • @victormaldonado6269
      @victormaldonado6269 4 роки тому

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

  • @diegomontano9202
    @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?

  • @helipalacio8772
    @helipalacio8772 3 місяці тому +1

    👨

  • @josecamilorodriguezvera8029
    @josecamilorodriguezvera8029 3 роки тому +2

    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
      @jonmircha  3 роки тому

      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 ua-cam.com/video/F55LNTW3GE0/v-deo.html

    • @roly7409
      @roly7409 3 роки тому

      Misma situación

  • @z3r0krypt
    @z3r0krypt 3 роки тому +1

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

  • @federicoraulmaciasaparicio1339
    @federicoraulmaciasaparicio1339 4 роки тому +2

    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

  • @darianmorat
    @darianmorat 3 роки тому +1

    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
      @jonmircha  3 роки тому

      😮

    • @MartinExequielFuraca
      @MartinExequielFuraca 2 роки тому

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

  • @heimancastro1954
    @heimancastro1954 Рік тому +1

    🎂🎂🎂🎂🎂🎂🎂🎂🎂🎂

  • @santiagotomascaci6786
    @santiagotomascaci6786 2 роки тому

    Profe como hizo para tener emmet en las template string?

  • @estebanoctaviopavezllanca2385
    @estebanoctaviopavezllanca2385 4 роки тому +2

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

  • @Juicio87
    @Juicio87 2 роки тому +1

    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é

  • @kunjilee9810
    @kunjilee9810 3 роки тому

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

  • @carloscabi
    @carloscabi 2 роки тому +1

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

  • @elweonweandolaweafome
    @elweonweandolaweafome Рік тому +1

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

  • @andreslemme
    @andreslemme 3 роки тому +1

    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
      @jonmircha  3 роки тому +1

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

    • @Valery-vx8ze
      @Valery-vx8ze 2 роки тому

      me pasa lo mismo

  • @codemixer3565
    @codemixer3565 4 роки тому

    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
      @jonmircha  4 роки тому +1

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

  • @svsv9
    @svsv9 4 роки тому

    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
      @jonmircha  4 роки тому +1

      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
      @svsv9 4 роки тому

      @@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.

  • @martinbergesio1990
    @martinbergesio1990 4 роки тому +1

    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
      @jonmircha  4 роки тому

      Significa que vas progresando, muy bien :)

  • @ronaldm.r
    @ronaldm.r 4 роки тому

    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
      @fernandoo 4 роки тому

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

  • @tami379
    @tami379 2 роки тому

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

    • @jonmircha
      @jonmircha  2 роки тому +1

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

  • @YuriMayakoskiSivizaca
    @YuriMayakoskiSivizaca 4 роки тому +2

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

  • @MaxielJohannaCamargoGomez
    @MaxielJohannaCamargoGomez 4 роки тому +1

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

  • @TheDawnBreaker1104
    @TheDawnBreaker1104 3 роки тому

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

    • @jonmircha
      @jonmircha  3 роки тому +1

      Lo tienes ejecutado desde un servidor web ??

    • @TheDawnBreaker1104
      @TheDawnBreaker1104 3 роки тому

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

  • @trovu9157
    @trovu9157 Рік тому +1

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

  • @YuriMayakoskiSivizaca
    @YuriMayakoskiSivizaca 4 роки тому +1

    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
    @ronaldm.r 4 роки тому +1

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

  • @fautinocalderon
    @fautinocalderon 6 місяців тому

    me están cagando a palo los ejercicios JAJAJ

  • @abelsilvasantacruz9584
    @abelsilvasantacruz9584 3 роки тому

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

  • @leonardoprone5967
    @leonardoprone5967 2 роки тому

    Muy útil esta clase, Jon! gracias