Cómo construir 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 la víspera de Navidad. 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 generalmente comienzan el 1 de diciembre..
De acuerdo con las costumbres locales, los calendarios de Adviento pueden tener diferentes diseños, pero con mayor frecuencia toman la forma de Grandes tarjetas rectangulares con 24 ventanas o puertas. marcando los días entre el 1 y el 24 de diciembre. Las puertas esconden mensajes, poemas, oraciones o pequeñas sorpresas..
En este post te mostraré cómo Haz un Calendario de Adviento en JavaScript orientado a objetos. Como está hecho en JavaScript de vainilla, puede colocar fácilmente el código en su propio sitio web.
- Manifestación
- Descargar fuente
Diseño de Calendario de JavaScript
Nuestro Calendario de Adviento tendrá 24 puertas en una imagen de fondo con tema navideño. Cada puerta ocultará una cita relacionada con la Navidad que aparece un mensaje de alerta cuando el usuario hace 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 pueden abrirse antes del día indicado..
Las puertas que ya están habilitadas tendrán un borde y un color de fondo (blanco) diferentes a los deshabilitados (verde claro). Usaremos HTML5, CSS3 y JavaScript para preparar nuestro Calendario de Adviento que se verá así:
Paso 1 - Crear estructura de archivos y recursos
En primer lugar, tenemos que elegir una imagen de fondo agradable. Elegí uno con orientación vertical de Pixabay, así que mi calendario contendrá 4 columnas y 6 filas.
Está bien si prefieres una orientación horizontal. Solo cambia las posiciones de las puertas en el código de JavaScript, ya que tendrás 6 columnas y 4 filas. Si tienes tu imagen, crea una carpeta llamada / imágenes, y guárdalo.
Este será nuestro único recurso de imagen para este proyecto..
Para los archivos JavaScript crear una /guiones carpeta dentro de su carpeta raíz. Coloque dos archivos de texto vacíos en él y nómbrelos calendar.js y mensajes.js. Calendar.js mantendrá la funcionalidad, mientras que mensajes.js contendrá la matriz de mensajes que aparecerán cuando el usuario “abre” (hace clic en) las puertas.
También necesitaremos un archivo HTML y un archivo CSS, así que cree dos archivos vacíos dentro de tu carpeta raíz y dales los nombres index.html y style.css.
Cuando esté listo, tendrá los recursos y la estructura de archivos que necesitará para llevar a cabo este proyecto, y su carpeta raíz tendrá este aspecto:
Paso 2 - Crea el HTML
El código HTML que utilizamos es bastante sencillo. La hoja de estilo CSS está vinculada en el
sección, mientras que el Dos archivos JavaScript están incluidos 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ía, ya que Utiliza los elementos de la página HTML cargada..El Calendario de Adviento mismo se coloca dentro de la 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 la “puertas de adviento” Selector de ID que será rellenado por los scripts. Si el usuario no tiene habilitado JavaScript en su navegador, solo verá una imagen de Navidad simple.
Calendario de adviento Calendario de adviento
Paso 3 - Rellena el “Mensajes” Formación
Necesitamos 24 citas navideñas para poblar el “mensajes” formación. Elegí el mío de GoodReads.
Abre el scripts / messages.js expediente; Aquí colocaremos las citas para mantenerlas separadas de la funcionalidad. los mensajes array es una matriz dentro de una matriz, cada elemento de la matriz externa contiene otra matriz con dos elementos: una cita y su autor.
Rellene la matriz con sus citas favoritas de acuerdo con la siguiente sintaxis:
var messages = [["Quote 1", "Author 1"], ["Quote 2", "Author 2"], ... ["Quote 24", "Author 24"]];
Paso 4 - Añadir estilos CSS básicos para las puertas
Para crear los estilos CSS necesarios para las puertas, debemos imaginar el diseño final, ya que las puertas se crearán con JavaScript en los siguientes pasos.
Necesitamos crear 4 columnas y 6 filas de rectángulos en la alineación correcta. Para ello, utilizaremos el posición: relativo y el posición: absoluta Reglas CSS Como la posición exacta cambiará puerta por puerta, agregaremos la parte superior, fondo, izquierda, y Correcto propiedades en el JavaScript, en el CSS solo necesitamos agregar una posición relativa al contenedor (lista no ordenada en el HTML) y posiciones absolutas para los elementos de la lista (también se agregarán en el JS).
La otra cosa importante en el archivo de hojas de estilo es Crea un diseño diferente para los estados deshabilitados y habilitados.. los .discapacitado El selector se agregará a los deshabilitados por JavaScript.
Para mi demo Calendario, puse un borde blanco sólido y fuentes blancas para las puertas habilitadas con un fondo blanco transparente al pasar el ratón; y un borde de color verde claro, y fuentes, y un fondo de color verde claro transparente para los discapacitados. Si no te gusta este diseño, puedes cambiar los colores y los estilos según tu deseo..
Coloque el siguiente código (o sus reglas de estilo modificadas) en su style.css expediente.
ul # adventDoors position: relative; estilo de lista: ninguno; relleno: 0; margen: 0; #adventDoors li position: absolute; #adventDoors li a color: #fff; ancho: 100%; altura: 100%; tamaño de fuente: 24px; text-align: center; pantalla: flexión; dirección flexible: columna; justificar-contenido: centro; texto-decoración: ninguno; borde: 1px #fff sólido; #adventDoors li a: not (.disabled): hover color: #fff; color de fondo: transparente; color de fondo: rgba (255,255,255,0.15); #adventDoors li a.disabled border-color: # b6fe98; color de fondo: rgba (196,254,171,0.15); color: # b6fe98; cursor: por defecto;
Paso 5 - Crear las variables globales
A partir de este paso solo trabajaremos con el scripts / calendar.js archivo, así que ahora vamos a abrir esto. Nuestro Calendario de Adviento utilizará dos variables globales.
los mi cal variable mantiene la imagen de calendario como un objeto JS. La imagen ya se ha añadido a la index.html archivo en el Paso 2. Colocaremos las puertas en esta imagen en el Paso 7. Capturaremos el HTML relacionado elemento marcado con el “adventCal” identificador utilizando el método DOM getElementById (). los mi cal la variable será un objeto de HTMLImageElement DOM.
los fecha actual variable mantiene la fecha actual para que nuestro script pueda decidir fácilmente si una puerta debe habilitarse o inhabilitarse. Crear fecha actual Creamos una instancia de un nuevo objeto de la clase Date JavaScript..
Coloque el siguiente fragmento de código en la parte superior de su calendar.js expediente.
var myCal = document.getElementById ("adventCal"); var currentDate = new Date (); Paso 6 - Crea el “Puerta” Clase
Como necesitamos 24 puertas, la forma más sencilla de hacerlo es crear un “Puerta” clase, y luego instanciarlo 24 veces.
Nuestra clase de puerta tiene dos parámetros, calendario y día. Para el calendario parámetro tendremos que pasar la imagen de Navidad que funcionará como fondo. Para el día parámetro tendremos que pasar el día actual de diciembre en forma de un número entero.
Pasaremos los valores exactos de los parámetros en el último paso (Paso 8), durante la instanciación de los 24 objetos de la Puerta..
Haremos 5 propiedades y 1 método para la clase Puerta. En este Paso solo veremos las 5 propiedades, y explicaré las contenido() método en el siguiente paso.
los “anchura” Y “altura” propiedades
los anchura y altura las propiedades calculan dinámicamente el ancho y el alto de cada puerta individual (que cambia según el ancho y el alto de la imagen de fondo).
Los multiplicadores de 0.1 y 0.95 están en la ecuación para dejar algo de espacio para los márgenes, entre cada puerta y alrededor de los lados del Calendario, también.
los “mensaje de adviento” propiedad
los mensaje de adviento propiedad contiene el contenido de los mensajes de alerta, a saber, las citas y los autores correspondientes que nuestros mensajes.js archivo tiene. los mensaje de adviento propiedad toma una cita y un autor de la mensajes [] matriz, dependiendo de la fecha actual.
Para el 1 de diciembre mensaje de adviento propiedad toma el primer elemento de la matriz externa que es mensajes [0], Como las matrices están basadas en cero en JavaScript.
Por la misma razón, la cotización del 1 de diciembre se posiciona como mensajes [0] [0] (primer elemento de la matriz interna), y el autor coincidente puede ser alcanzado como mensajes [0] [1] (segundo elemento de la matriz interna).
los “X”Y”y” propiedades
Propiedades X y y mantenga las posiciones correctas de cada puerta que utilizaremos en el siguiente paso para configurar el parte superior y izquierda Propiedades CSS. Estos complementarán el posición: relativo y posición: absoluta Reglas de CSS que establecimos en el Paso 4 para el contenedor de la puerta (ul # adventDoors) y las puertas en sí (#adventDoors li). Los cálculos pueden parecer un poco intimidantes, pero vamos a verlos rápidamente.
los X propiedad será utilizada por el izquierda Propiedad de posicionamiento CSS en el siguiente paso (paso 7). Determina en píxeles dónde se debe colocar una Puerta individual en el eje x.
Toma el ancho de la imagen de fondo y le deja un pequeño margen (4%). Luego, con la ayuda del operador restante, evalúa en qué columna se colocará (recuerde, habrá 4 columnas), y finalmente agrega un pequeño margen (10%) a cada Puerta individual mediante el uso de un multiplicador 1.1..
De la misma manera, la y propiedad será utilizada por el parte superior Propiedad de posicionamiento CSS, y también determina en píxeles dónde debe colocarse una Puerta individual en el eje y.
Tomamos la altura de la imagen de fondo con la ayuda de la propiedad de altura del pasado. calendario parámetro (que contiene un objeto DOM), y deja un margen del 4% alrededor de los lados verticales del calendario.
Luego, con la ayuda del método Math.floor () calculamos en qué fila estará un objeto Door (habrá 6 filas).
Finalmente, agregamos un margen del 10% para cada objeto de Puerta multiplicando su altura usando un multiplicador 1.1..
puerta de la función (calendar, day) this.width = ((calendar.width - 0.1 * calendar.width) / 4) * 0.95; this.height = ((calendar.height - 0.1 * calendar.height) / 6) * 0.95; this.adventMessage = 'Día' + día + 'de Adviento \ n \ n' + '"' + mensajes [día - 1] [0] + '" \ n \ n \ t' + 'por' + mensajes [día - 1] [1] + '\ n \ n'; this.x = (0.04 * calendar.width + ((day - 1)% 4) * (1.1 * this.width)); this.y = - (0.96 * calendar.height - Math.floor ((day - 1) / 4) * (1.1 * this.height)); this.content = function () …;
Paso 7 - Rellena el “Contenido()” Método
Es el contenido() Método que mostrará nuestras puertas en el navegador. En primer lugar, creamos un nuevo nodo DOM con la ayuda de la variable nodo que creará el
Como la clase Door se instanciará 24 veces en un bucle for en el siguiente paso (paso 8), esto significa que tendremos 24
La propiedad node.id en la siguiente línea agrega un selector de id único a cada elemento de la lista (puerta). Necesitaremos esto para poder recorrer correctamente los días en el siguiente paso (Paso 8). De esta manera la puerta 1 tendrá un id =”puerta1 ", La puerta 2 tendrá un id =”puerta2 " selector, etc.
La propiedad node.style.cssText en la siguiente línea agrega algunas reglas CSS a cada elemento de la lista (puerta) con la ayuda de estilo =”... ” Atributo HTML que se utiliza para incluir CSS en línea en archivos HTML. los node.style.cssText La propiedad utiliza las propiedades de la clase Puerta que establecimos en el paso anterior (Paso 6).
Para poder hacer clic en nuestro objeto Puerta también necesitamos agregar un etiqueta dentro de los elementos de la lista. Esto lo logramos con la ayuda del nodo interno variable que vinculamos como elemento hijo al elemento de lista apropiado identificado por el id =”puerta [i]” Selector (con [i] siendo el número del día), usando el método DOM appendChild () como antes.
La propiedad innerHTML en la siguiente línea muestra el día actual (1-24) en la parte superior de la puerta en el navegador, y también agregamos un href =”#” atribuir a nuestras etiquetas de anclaje por medio de la propiedad href DOM.
Finalmente, en la sentencia if-else, evaluamos si un objeto Door debe habilitarse o inhabilitarse. Primero, examinamos si estamos en el mes 12 del año (diciembre) utilizando el método getMonth () del objeto Date. Necesitamos agregar 1, porque getMonth () está basado en cero (enero es el mes 0, etc.).
Después de esto, verificamos si la fecha actual mantenida en el fecha actual variable global que establecimos en el Paso 5 es menor que la día que representa el objeto Door actual.
Si no es diciembre o si el día representado por la Puerta dada es más grande que la fecha actual, la Puerta debe estar deshabilitada, en cualquier otro caso debe estar habilitada para que los usuarios puedan hacer clic en ella y ver el mensaje de Adviento relacionado.
Si la puerta está deshabilitada, agregamos un clase =”discapacitado” Seleccione la etiqueta de anclaje dada con la ayuda de la propiedad className. Recuerda, ya hemos estilizado el .discapacitado clase con CSS en el Paso 4. También debemos configurar el atributo de evento onclick HTML para devolver falso.
Si la puerta está en estado habilitado, agregamos el mensaje de adviento a un mensaje de alerta y colóquelo dentro del atributo de evento HTML onclick.
this.content = function () var node = document.createElement ("li"); document.getElementById ("adventDoors"). appendChild (node); node.id = "puerta" + día; node.style.cssText = "width:" + this.width + "px; height:" + this.height + "px; top:" + this.y + "px; left:" + this.x + "px "; var innerNode = document.createElement ("a"); document.getElementById ("door" + day) .appendChild (innerNode); innerNode.innerHTML = día; innerNode.href = "#"; if ((currentDate.getMonth () + 1) < 12 || currentDate.getDate() < day ) innerNode.className = "disabled"; innerNode.onclick = function() return false; else var adventMessage = this.adventMessage; innerNode.onclick = function() alert(adventMessage); return false; ; Paso 8 - Inicializa el “Puerta” Objetos
Finalmente, necesitamos inicializar la clase Puerta 24 veces..
Para hacerlo, usamos una expresión de función invocada de inmediato que es bastante útil aquí, porque no necesitamos una variable, ya que solo queremos ejecutar el código dentro de la función una vez..
Creamos un puertas [] Arreglo que albergará los 24 objetos de la puerta. Recorremos los días del 1 al 24 (serán los elementos 0-23 del conjunto de las puertas [], ya que los arreglos están basados en cero) y finalmente devolvemos el conjunto puertas [] matriz que incluye los 24 objetos de la puerta para mostrarlos en el navegador.
(function () var doors = []; para (var i = 0; i < 24; i++) doors[i] = new Door(myCal, i + 1); doors[i].content(); return doors; )();
- Manifestación
- Descargar fuente
