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.

• Manifestación
• Descargar Fuente

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

Paso 1 - Crear estructura de archivos y recursos

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.

Este será nuestro único recurso de imagen para este proyecto.

Para los archivos JavaScript, cree una carpeta / scripts dentro de su carpeta raíz. Coloque dos archivos de texto vacíos en él, y asígneles el nombre calendar.js y messages.js . Calendar.js contendrá la funcionalidad, mientras que messages.js contendrá la matriz de mensajes que aparecerán cuando el usuario "abra" (haga clic en) las puertas.

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

Paso 2 - Crea el HTML

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 .

El Calendario de Adviento mismo se coloca dentro del

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

15 Herramientas, bibliotecas y marcos de tipografía web útiles

Tratar con la tipografía en la web ha sido muy peculiar. Cada navegador tiene su propio algoritmo para representar fuentes que podrían generar discrepancias inesperadas. Solo hay unas pocas propiedades de CSS que puede usar para tener cierto control sobre las fuentes, como interletraje de fuentes, suavizado de fuentes, al crear DropCaps, etc.

(Consejos de tecnología y diseño)

20 ejemplos de diseño vertical de pantalla dividida en diseño web

Un diseño de pantalla dividida está en uso cuando los elementos de pantalla completa están divididos en dos o más partes verticales . A pesar del hecho de que este tipo de diseños de sitios web están de moda en estos días, esta decisión puede hacer o deshacer su diseño. Cuando se hace de forma lógica y correcta, el diseño de pantalla dividida ofrece una experiencia de visualización mágica para los usuarios.El diseño de

(Consejos de tecnología y diseño)