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

Recortar y cambiar el tamaño de las imágenes con este simple complemento jQuery

El recorte dinámico de imágenes es más fácil que nunca gracias a bibliotecas como jQuery. La base de código es fácil de usar y la comunidad tiene miles de complementos para manejar imágenes .Uno de estos complementos es Cropper, una solución gratuita de recorte de imágenes de código abierto que maneja el zoom, recortar e incluso guardar imágenes .Este proye

(Consejos de tecnología y diseño)

5 aspectos cruciales a considerar antes de aceptar la oferta de trabajo

Este artículo es parte de la serie " Ace your Interview ", donde compartimos consejos y trucos que puede usar sin conexión y en línea para enganchar el trabajo de sus sueños. Haga clic aquí para ver más artículos en la misma serie Así que tiene su hoja de vida notada, respondió con confianza las diez preguntas más frecuentes de la entrevista y la empresa de sus sueños le ofrece una oferta de trabajo. Tu corazó

(Consejos de tecnología y diseño)