¿Te has cansado de actualizar manualmente el año en el pie de página de tu sitio web cada enero? Tal vez para una Landing Page, esta tarea no represente un gran problema. Sin embargo, para un blog o un proyecto más grande, puede convertirse en una verdadera molestia.
Una solución común podría ser seleccionar el contenedor del año con querySelector y realizar el cambio. Aunque no es una tarea demasiado complicada, existe una opción aún mejor. ¿Qué te parecería escribir un fragmento de código que haga este trabajo por ti, actualizando automáticamente el año a medida que pasa el tiempo? Si te interesa, te invito a seguir leyendo. Abajo encontrarás el código de partida para que lo copies y desarrolles junto a mí. He creado prácticamente toda una página, pero solo para que el blog parezca más completo. Sin embargo, toda nuestra atención estará centrada en el pie de página.
Código de Partida: HTML y CSS
Iniciando la Magia: Código JavaScript en Acción
Aunque puede parecer un desafío, en realidad es bastante sencillo. Con un par de líneas de código, podremos solucionar este problema. Primero, vamos a declarar una función llamada modificarFecha() y luego agregaremos un «Event Listener» a la ventana que detectará el evento load y ejecutará esta función.
Dentro de esta función, creamos una instancia del objeto Date de JavaScript. Este objeto nos da acceso a la fecha y hora actuales. Una vez hecho esto, ahora necesitamos seleccionar el elemento HTML donde queremos mostrar esta fecha. En nuestro código de ejemplo, este elemento tiene el id fecha. Usamos document.querySelector(‘#fecha’) para seleccionar este elemento, y textContent para cambiar su contenido al año actual. Finalmente, asignamos el resultado de la función getFullYear() (que extrae el año de nuestra variable fecha) al contenido de texto de nuestro elemento seleccionado. Cuando guardas y actualizas tu página, ¡verás que el año en tu pie de página se ha actualizado automáticamente!
Aquí abajo te dejo el código JavaScript para que puedas copiarlo si quieres y ver su funcionamiento.
Repasando lo Aprendido
Durante este blog, exploramos cómo automatizar la actualización del año en el pie de página de un sitio web con JavaScript. Aquí te dejo un resumen de los puntos clave para refrescar rápidamente lo discutido.
🚀 Resumen Rápido: Automatizando la Fecha con JavaScript
- Problemática Común: La necesidad de actualizar manualmente el año en el pie de página cada enero.
- Solución Tradicional: Usar querySelector para seleccionar el contenedor y realizar el cambio manual.
- Automatización: Fragmento de código que actualiza automáticamente el año.
- Objeto Date de JavaScript: Herramienta que proporciona la fecha y hora actuales.
- Función modificarFecha(): La función clave que realiza la tarea de actualización.
- Evento Load: El evento que asegura que la función se ejecute al cargar la página.
¡Hasta la Próxima, Código-Lover!
Este truco de JavaScript es una forma sencilla y eficaz de mantener tu sitio web actualizado sin tener que hacer cambios manuales cada año. Recuerda, si tienes alguna pregunta o duda sobre este código, no dudes en dejar un mensaje en la pestaña Contacto. ¡Estamos aquí para ayudar! Y si entendiste todo a la primera, ¡nos encantaría saberlo también! Esperamos que hayas disfrutado de este blog y que hayas aprendido algo nuevo. ¡Nos leemos en el siguiente!
¡Un Abrazo! Braulio de AprendeCode.