Cómo crear un calendario de Adviento simple en JavaScript

El Adviento es el período de espera y preparación para la Navidad que comienza cuatro domingos antes de Nochebuena. El paso del tiempo de Adviento se mide tradicionalmente con la ayuda de un Calendario de Adviento o una Corona de Adviento. Aunque el comienzo de Adviento no es una fecha fija, los Calendarios de Adviento usualmente comienzan el 1 de diciembre.

Según las costumbres locales, los calendarios de Adviento pueden tener diferentes diseños, pero con mayor frecuencia adoptan la forma de grandes tarjetas rectangulares con 24 ventanas o puertas que marcan los días entre el 1 y el 24 de diciembre. Las puertas esconden mensajes, poemas, oraciones o pequeñas sorpresas.

En esta publicación, te mostraré cómo hacer un Calendario de Adviento en JavaScript orientado a objetos . Como está hecho en código JavaScript, puede colocar fácilmente el código en su propio sitio web.

Diseño de calendario de JavaScript

Nuestro Calendario de Adviento tendrá 24 puertas en una imagen de fondo con temas de Navidad. Cada puerta esconderá una cita relacionada con la Navidad que aparecerá en forma de mensaje de alerta cuando el usuario haga clic en la puerta . Las puertas permanecen cerradas hasta que llega el día dado, como es el caso del Calendario de Adviento de la vida real; las puertas no se pueden abrir antes del día correcto.

Las puertas que ya están habilitadas tendrán un borde y un color de fondo (blanco) diferentes a los de las personas con discapacidad (verde claro). Usaremos HTML5, CSS3 y JavaScript para preparar nuestro Calendario de Adviento que se ve así:

En primer lugar, debemos elegir una buena imagen de fondo. Elegí uno con orientación vertical de Pixabay, por lo que mi calendario contendrá 4 columnas y 6 filas .

Está bien si prefiere una orientación horizontal. Simplemente cambie las posiciones de las puertas en el código JavaScript, ya que tendrá 6 columnas y 4 filas . Si tiene su imagen, cree una carpeta llamada / images, y guárdela.

También necesitaremos un archivo HTML y un archivo CSS, así que cree dos archivos vacíos dentro de su carpeta raíz y asígneles los nombres index.html y style.css .

Cuando esté listo, tiene los recursos y la estructura de archivos que necesitará para llevar a cabo este proyecto, y su carpeta raíz se ve así:

El código HTML que usamos es bastante sencillo. La hoja de estilo CSS está vinculada en el sección, mientras que los dos archivos de JavaScript se incluyen en la parte inferior de la sección. Esto último es necesario, porque si ponemos los scripts en el sección, el código no se ejecutará, ya que utiliza los elementos de la página HTML cargada .

etiqueta semántica Cargamos la imagen de Navidad como una Elemento HTML, y no como una propiedad de fondo CSS, porque de esta manera podemos acceder fácilmente a él como un elemento del DOM.

Debajo de la imagen colocamos una lista desordenada vacía con el selector de id "adventDoors" que se completará con los scripts. Si el usuario no tiene JavaScript habilitado en su navegador, solo verá una imagen simple de Navidad.

 Calendario de adviento  Calendario de adviento 
 (function () {var doors = []; for (var i = 0; i <24; i ++) {puertas [i] = new Puerta (myCal, i + 1); puertas [i] .content ();} puertas de retorno;}) ();

Manifestación
Descargar Fuente

Contratar empleados de Gen-Z: 8 cosas que necesita saber

Generación Z son aquellos que nacieron a mediados de los 90 o principios de los 2000, todos los cuales básicamente tenían más dificultades con las tabletas que los caminantes de niños pequeños. Esta es la tecnología demográfica nuevas empresas como la mía aún están pensando si atraer a un trabajo.¿Por qué l

(Consejos de tecnología y diseño)

Cómo usar el almacenamiento fuera de línea HTML5 en su sitio web

Además de los nuevos elementos en HTML5, esta nueva tecnología web nos ofrece Almacenamiento sin conexión . Existen varios tipos de almacenamiento fuera de línea, y en este artículo discutiremos específicamente sessionStorage y localStorage. El almacenamiento sin conexión nos permite guardar datos en el navegador del usuario y hace que nuestras aplicaciones web o juegos funcionen sin conexión (durante un período de tiempo).En un ej

(Consejos de tecnología y diseño)