es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


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 

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

7 Arrastrar y soltar complementos para construir sitios de WordPress

7 Arrastrar y soltar complementos para construir sitios de WordPress

El arrastrar y soltar ha sido el enfoque más apreciado por los no expertos en tecnología, cuando se trata de organizar diseños web. Esta es, tal vez, las razones por las que Wix, SquareSpace y tales servicios son tan populares. Solo por nombrar algunas herramientas más que te permiten hacer más con arrastrar y soltar, tenemos:Crea hermosos sitios web con IM CreatorEstilo personalizado con JQuery UI SortableCrea gráficos de aspecto profesional con Canva¡Crea diseños HTML Bootstrap con LayoutIt!Guarde,

(Consejos de tecnología y diseño)

Cómo hacer un velocímetro SVG animado

Cómo hacer un velocímetro SVG animado

Un medidor de calibre es una herramienta que indica visualmente un valor dentro de un rango determinado. En las computadoras, un "indicador de espacio en el disco" usa un medidor de calibre para mostrar cuánto espacio de disco se usa del total disponible. Los indicadores tienen zonas o regiones en su rango, cada una diferenciada por su propio color.

(Consejos de tecnología y diseño)