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

Finalmente (sorta) podrás utilizar Facebook en el trabajo con Workplace

Los servicios de redes sociales centrados en Office como Yammer y Slack son una gran ayuda para las empresas, ya que permiten que los empleados de varios departamentos de una empresa se comuniquen entre sí en una sola aplicación o sitio web. Hoy, después de años de pruebas internas, Facebook lanzó su propia versión del servicio de redes sociales basado en la oficina: Workplace .Anter

(Consejos de tecnología y diseño)

Comprender Meta Box personalizado de WordPress

En la publicación anterior, hemos hablado sobre el campo personalizado de WordPress, que le permite agregar y generar una nueva entrada en una publicación usando el cuadro Campo personalizado que WordPress proporciona en la pantalla de edición de publicaciones. Sin embargo, si no se siente cómodo utilizando el cuadro de campo personalizado (todos tenemos nuestras preferencias individuales), aquí hay una alternativa: puede crear un cuadro meta.Un m

(Consejos de tecnología y diseño)