Curso JavaScript: 82. DOM: Ejercicios Prácticos | Reloj Digital -

En este video de ejercicios del #DOM de #JavaScript te enseño a hacer un reloj digital.
💛 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...

[@imachris4769]

Es muy satisfactorio llegar a este punto y entender con facilidad como se hacen las cosas y como todo funciona “internamente”, sin duda, el mejor curso de JavaScript que pueda haber en YT. - Antes creía que conectar el JS con el DOM era supercomplejo, y que para hacer algo como un reloj era una odisea, ahorita mismo, me doy cuenta de que crear aplicaciones en el DOM desde JS solo consta de tres elementos: El nodo DONDE incluyes la información, un evento que indica CUANDO hacerlo y el elemento QUE detona la acción. Ahí tienes donde, cuando y con qué.

[@jonmircha]

😉👋🏻

[@hugrillo84]

inicio de 2024 y este contenido esta genial muchas gracias

[@jonmircha]

👋🏻😉

[@Ni_idea_de_tecnologia]

Muy didácticoa esta clase. Así se consolidan los conocimientos adquiridos. Muchas gracias Sr. Mircha

[@jonmircha]

Hola, muchas gracias

[@timawid]

El mejor curso de JavaScript ✅

[@jonmircha]

Muchas gracias!👋🏻😉

[@lautarodisalvo8360]

Con lo que se me complicó para entender el anterior ejercicio este se me volvió mas facil, genio que sos Jon. Espero que lo que esté estudiando no esté muy obsoleto hoy en 2023

[@jonmircha]

👋🏻😉

[@franklinsanchez7589]

haha me paso igual

[@bersuarez2741]

Obsoleto ? 😂😂😂

[@manuelcobasguerra5688]

Me Estan Encantado Los Ejercicios Mil Gracias Por Tu Esfuerzo y Tu Forma de explicar repito: MIL GRACIAS

[@tongastonga22]

Mil gracias Jooon, compre tu taller y a ser sincero, no entendi mucho :( vengo haciendo todos tus cursos desde html, css, toda la parte de grid y flexbox y bueno ahora javascript, espero en el camino ir encontrando la luz ! jajja saludo gran sensei.

[@jonmircha]

👋🏻😉

[@moisesalejandromontielbric7720]

Felicidades por los 111000 suscriptores!

[@jonmircha]

Muchísimas gracias!

[@ivancondesilva306]

Al ver la clase por primera vez casi siempre me desanimo por no entender, después vuelvo a repasar la clase y se me pasa =). Felicidades Jon y muchas gracias por tu conocimiento, un verdadero Master

[@jonmircha]

😉👍🏻

[@yovanyescobarrojas2041]

de acuerdo contigo al 100%

[@gustavomemes]

jaja yo hay clases que las veo como 5 veces hasta que las entiendo, hay que insistir

[@EducacionCultura1992]

Excelente profe eres el mejor. Desde que lo encontre solo estudio con usted, es excelente todo su contenido.

[@jonmircha]

😉👋🏻

[@danielfabiani4468]

De nuevo estoy de vuelta...Me obligaste a repasar con tu curso html de 9 horas y aahora comencé los de CSS que mas que repaso es aprender porque nunca me interesó demasiado el frontend. Ademas me tuve que reveer los cap del 63 al 80 y finalmente...no me salió jaja. Pero reforcé lo visto hasta ahora. Muchas gracias.

[@jonmircha]

👋🏻😉

[@Wiiiiizard]

🧙‍♂Muchas graciasss!!!

[@jonmircha]

👋🏻😉

[@juang7405]

Jon: mil gracias por tanto que nos haces aprender. Saludos desde Argentina

[@jonmircha]

Con mucho gusto

[@Juankybi]

no se si en algún sitio tienes un servidor real. Quizás sea de otra lista de reproducción. Siempre se hace esto en un localhost y tal como tu explicas, será sencilla esa practica. Esto va estupendo, aprendemos mucho contigo. Y siempre que me acuerdo doy a "me gusta"

[@carloseduardogomezlozano491]

Para mostrar la fecha y la hora actual hice lo siguiente dentro de la funcion digitalClock: let clockHour = new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString()

[@jonmircha]

👋🏻😉

[@AoE_S4voy]

Me cuesta mucho seguir, le pierdo el hilo a los terminos, necesito practicar mas. Gracias por tan maravilloso curso

[@jonmircha]

👋🏻😃 ánimo

[@jaimefdezmv]

Hola Jon, primero que nada dejame manifestarte mi agradecimiento por tu dedicación y enseñanza. Tengo una duda: set interval es una especie de ciclo, o por qué se muestra el reloj cada segundo? Mil bendiciones para ti por tu gran labor. Gracias

[@carlosjavierorozco8418]

Gracias! este ejercicio tambien estuvo estupendo 😁

[@jonmircha]

Con mucho gusto

[@williamalexanderpineda6098]

Excelente vídeo!

[@jonmircha]

😉👋🏻

[@ronalddavidhernandezpadill8182]

Logré hacer el ejercicio ahora verétu solución

[@jonmircha]

👋🏻😉

[@carlosurtubia8265]

excelente video, gracias por tu contenido

[@jonmircha]

Gracias, saludos

[@Bisson156]

Genial Jon muchas gracias!

[@jonmircha]

🤘🏻

[@braianrico4422]

Jon mil gracias, todo perfecto de verdad!!!🧙‍♂️🧙‍♂️🧙‍♂️

[@jonmircha]

Mil gracias!!

[@nachosanabria6942]

excelente video gracias

[@jonmircha]

Gracias por comentar

[@pablomartindorado]

Hola Jon, soy de Argentina . Gracias por que estoy aprendiendo dia a dia con tus videos . Soy del futuro como decís en tus videos . De a poco entiendo y es gracias a ti . 😀😀😀 Puedes ayudarme . Con esto no se que hacer "Indicate whheter a cookie is intended to be set in cross-site context by specifying its SameSite attribute."

[@jonmircha]

😉👍🏻 😮

[@josepalacios9273]

Excelentes ejercicios. El curso es muy bueno. Hice los dos ejercios sin utilizar export e import, por algun motivo que no logro descubrir import export no me funcionan(!!???). Seguiré tu curso hasta las ultimas consecuencias :).

[@ronalddavidhernandezpadill8182]

pruebalo con liveserver

[@johnherrera5913]

Master gracias por la enseñanza 👍👍 éxitos!

[@jonmircha]

Con mucho gusto

[@dan_seb]

Gracias por todo Jon!

[@jonmircha]

🧔🏻✌🏻

[@paulpaucarb]

gracias por tu aporte y tu esfuerso

[@jonmircha]

Con mucho gusto

[@yairmanzo]

AYUDA!! El reloj esta iniciando sin tema pero al probas el boton de deneter solo desaparece un segundo el reloj y despues continua avanzando, No entiendo porque. El código: const d = document; export function digitalClock(clock, btnPlay, btnStop){ d.addEventListener("click", e =>{ let clockTempo; if(e.target.matches(btnPlay)){ clockTempo = setInterval(()=>{ console.log('Interval') let clockHour = new Date().toLocaleTimeString(); d.querySelector(clock).innerHTML = `${clockHour}` }, 1000); e.target.disabled = true; } if(e.target.matches(btnStop)){ clearInterval(clockTempo); d.querySelector(clock).innerHTML = null; d.querySelector(btnPlay).disabled = false; } });

[@elweonweandolaweafome]

ufffff todo bien hasta el momento

[@jonmircha]

👋🏻😉

[@fernandocarrillo1336]

Excelente explicación

[@jonmircha]

Hola, muchas gracias

[@tomasalvarez922]

Como va? Primero que nada voy a empezar a ver tu serie. Y me gustaria que des ejercicios basicos para hacer asi poder ir practicando

[@jonmircha]

Te sugiero que empieces desde el video 1 y sí hay cada que acabo un cierto número de temas hay ejercicios :), comparte para llegar a más gente :)

[@tomasalvarez922]

@@jonmircha lo empece y esta genial! lo compartí con amigos interesados también. saludos desde argentina

[@reactivoJS]

Hola Jon, no entiendo porqué asignas un evento click a todo el DOM y no directamente al botón, esto no hace que cada vez que se pulsa click el javascript tenga que estar mirando si es o no el botón, es decir, no sería más eficiente asignar el evento click al botón directamente? Gracias.

[@user87546]

Yo creia lo mismo hasta que aprendí que existe la propagación o efecto burbuja. No termino de entender aún la razón de ser de la propagación o captura pero supongo que mas adelante lo entenderé

[@mcr3421]

Excelente curso :D

[@jonmircha]

🤓🙌🏻

[@ronaldm.r]

Jon, consideras buena práctica que yo por ejemplo elaboro todas las funciones cierto, luego declaro un objeto literal y luego les declaro esas funciones como métodos de ese objeto creando así un objeto global que me trae todas las funciones y lo exporto como default y no tengo que hacer tantos import. Es o no mala práctica hacer eso?

[@jonmircha]

Si es un proyecto pequeño esta bien, pero si es uno grande lo ideal es que cada funcionalidad sea un sólo módulo esto también te ayuda a reutilizar y a escalar fácilmente

[@helipalacio8772]

👏🏻👏🏻👏🏻 🙏🏻🙏🏻🙏🏻

[@compaluis51]

He seguido todo paso a paso, ya revisé y volví a revisar y mis botones de detener se quedan inhabilitados

[@mguimenez]

Así de sencillo!! jaaj kapo

[@jonmircha]

;)

[@angel-pn6wq]

hola buenas noches una consulta añadir al documento el mismo evento en distintos archivos no da problemas con la optimización?

[@jonmircha]

No

[@marianosantadino7623]

Hola Jon, no entiendo cual es la diferencia entre export default y uno sin default. Lo explicaste en alguna parte de este curso? Creo que me la perdi

[@jonmircha]

Video 33kzbin.info/www/bejne/ZniohqyHjcpmhKs

[@helipalacio8772]

👏👏👏 🙏🙏🙏

[@jonmircha]

👋🏻😉

[@eduardflores8420]

segun la documentación de matches() solo busca la coincidencia del selector css ingresado , pero tu lo haces con id , esta bien hacer eso ??'

[@jonmircha]

Si

[@eduardflores8420]

@@jonmircha pense q solo funcionaba con clases css , ya leí bien e hice mis pruebas , con ids tambien funciona , gracias

[@andreyvillamil2205]

Hola profe Jon, primero que todo volver a agradecerle por el curso, por otro lado tengo un problemilla, cuando le coloco a la invocación del script el type="module", me marca error el navegador, no eh podido trabajar con módulos, siempre me pasa eso, no me deja importar, o bueno los importo pero el navegador me marca error por ese atributo, sabes cuál podría ser la solución?

[@jonmircha]

Un archivo que usa módulos, siempre debe ejecutar desde un servidor web

[@andreyvillamil2205]

@@jonmircha Muchas gracias por la aclaración!!👋👋

[@alejandrosuarez239]

tenes pensado sacar algún framework de javascript?

[@jonmircha]

Sí, React ⚛️

[@axelnival2554]

No puedo pasar de aqui, cuando le asigno una variable al setInterval e intento llamarla en el clearInterval me tira error de consola diciendo que no encuentra una referencia al querer parar el reloj, y si le agrego let o const pasa igual con var no sucede nada, simplemente ejecuta todo limpia el html y el reloj vuelve a ejecutarse de nuevo, :/

[@jonmircha]

😮

[@adriel8152]

Es por el scope (que se explicó en otro video). La solución es declarar una variable global, asignarle a esa variable el setInterval, y con eso funcionará tu clearInterval, de hecho fue lo que hizo Jon en su video

[@axelnival2554]

@@adriel8152 Gracias por explicar, igualmente mas adelante logre comprender mas lo de la variable global jaj

[@pacodev3633]

Buenas, no tengo problemas de funcionalidad en el ejercicio, pero sí en la vista. Las dos primeras veces que le doy al botón de detener el reloj la etiqueta h2 empuja hacía abajo, después ya mantiene la posición en el resto de clicks. ¿Será debido a alguna propiedad de CSS?, gracias un saludo.

[@pacodev3633]

He revisado el código de varios compañeros y les ocurre lo mismo que a mí pej codepen.io/lixander-molina-garcia/pen/qBZdPgY ---- codepen.io/mayakoski/pen/BajxwXM etc... ¿Puede ser problema del navegador?, gracias.

[@pacodev3633]

Buenas, el problema reside en la barra de scroll que no sube del todo. Yo lo solucioné mandando el link del menu al #body(id ="body") en lugar de a la #sección1(id="sección1") para que la barra de scroll suba del todo. Le aplique una clase propia a la sección1 con todas las propiedades heredadas de .section y sobrescribiendo la propiedad padding-top = 0. Si alguien sabe una solución más optimizada le invito a compartirla, un saludo.

[@ejop9681]

​@@pacodev3633 Hola, no es problema del navegador, es un tema de etiquetas, revise tu codepen y le faltan varias etiquetas como el e incluso una > de cierre en link rel="stylesheet". esto afecta el comportaniento. Para que no bajen los botones al mostrar el reloj o suban cuando los quitas, baja la etiqueta despues del div de los 4 botones.

[@helipalacio8772]

👨

[@jonmircha]

👋🏻😉

[@DanielLozadaDev]

alguien sabe por qué cuando abro mi página con liveServer y la página se traduce a español ya no funcionan los botones, mientras en inglés funciona con normalidad?

[@dvesc]

ALV también me pasa y ni me había dado cuenta :0.....diste con el por qué del problema???

[@gabrielperdomo9329]

@@dvesc pongan el lenguaje en español en el html para que no le traduzca la pagina. yo en mi caso uso donde ES = español y ar de argentina.... y con eso no traduce la web. espero que les funcione

[@Stephanie-gs4sz]

Yo tengo un problema terrible y no se porque demonios!!! La hoja de estilos .css daña mi archivo reloj.js; Es decir, si elemino mi archivo .css funciona todo mi script si agrego mi archivo .css se daña el script ... Esto que camino por el techo, ya lo googlee por todos lados.. si a alguien mas le pasa..al menos acompañeme a llorar!

[@jonmircha]

:O

[@euronymous_]

Me sale la hora con retraso, ¿alguien pudo solucionar el error?

[@jonmircha]

Sube tu código a un codesandbox o codepen así platicado ni como ayudarte

[@euronymous_]

@@jonmircha codepen.io/Euronymous_/pen/VwayaKw es este ¿ no sabes que le pasará a los servidores locales que no me dejan usar el type="module"?

[@jonmircha]

NO tengo idea de tus servidores locales, busca en la documentación del que estes trabajando, no veo problema en tu reloj me da bien la hora

[@euronymous_]

@@jonmircha pues si, no creo que sea un error de sintaxis, creo que sería algo del navegador.

[@euronymous_]

@@jonmircha ya supe cual era el problema... ¿sabes cuando la solución está enfrente tuya y no te fijas? Bueno, mi editor de código (sublime text) le agregaba a la etiqueta script el atributo type="text/javacript" lo que pasa, es que cuando yo le ponía el atributo type="module" no me lo detectaba.... Ahora solo tiene el type="module" y ya funciona

[@alexanderg3764]

El profe gasta menos de 10 min, yo me demore casi 1 hora :)

[@jonmircha]

😉 con calma y a tu paso, no hay prisa lo importante es que aprendas a hacer las cosas por tu cuenta

[@oswaldoalonzo]

y mas si tenemos que buscar nuestros errores de escritura... pero bueno, esa es la idea aprender de nuestros errores, y como dicen, se aprende más leyendo código.

[@ivancondesilva306]

es que él si estudió, así que chiste (solo es una broma, como decía la chilindrina). Si viera mis códigos yo creo que le darían pena al Profe jon =( , muchas gracias por compartir tu conocimiento, con desvelos y jalones de cabello ya voy hasta este capítulo.

[@heimancastro1954]

🕒🕒🕒🕒🕒🕒🕒🕒🕒🕒😎😎😎😎😎

[@jonmircha]

😉

[@estivenmayhuay5626]

Hola a todos, quisiera agradecer al Teacher "Jon MIrcha" del cual siento que estoy aprendiendo mucho, por lo cual quiero compartirles el ejercicio del clock and alarm realizado con clases en javascript => codepen.io/estivenMayhuay/pen/xxPWbvE?editors=1010

[@jonmircha]

👍🏻