Come costruire un semplice calendario dell'Avvento in JavaScript

L'Avvento è il periodo di attesa e preparazione per il Natale che inizia quattro domeniche prima della vigilia di Natale. Il passaggio del tempo di Avvento è tradizionalmente misurato con l'aiuto di un calendario dell'Avvento o di una corona d'Avvento. Anche se l'inizio dell'Avvento non è una data fissa, i calendari dell'Avvento di solito iniziano il 1 ° dicembre.

Basati sulle usanze locali, i calendari dell'Avvento possono avere disegni diversi, ma più frequentemente assumono la forma di grandi carte rettangolari con 24 finestre o porte che segnano i giorni tra il 1 ° e il 24 dicembre. Le porte nascondono messaggi, poesie, preghiere o piccole sorprese.

In questo post ti mostrerò come creare un Calendario dell'Avvento in JavaScript orientato agli oggetti . Poiché è realizzato in JavaScript vaniglia, puoi facilmente inserire il codice nel tuo sito web.

• dimostrazione
• Scarica fonte

Progettazione calendario JavaScript

Il nostro calendario dell'Avvento avrà 24 porte su un'immagine di sfondo a tema natalizio. Ogni porta nasconderà una citazione relativa al Natale che comparirà sotto forma di un messaggio di avviso quando l'utente fa clic sulla porta . Le porte rimangono chiuse fino a quando arriva il giorno, come nel caso del calendario dell'Avvento della vita reale; le porte non possono essere aperte prima del giorno giusto.

Le porte che sono già abilitate avranno un bordo e un colore di sfondo diversi (bianco) rispetto a quelli disabilitati (verde chiaro). Useremo HTML5, CSS3 e JavaScript per preparare il nostro calendario dell'Avvento simile a questo:

Passaggio 1: crea struttura e risorse file

Prima di tutto, dobbiamo scegliere una bella immagine di sfondo. Ne ho scelto uno con orientamento verticale da Pixabay, quindi il mio calendario conterrà 4 colonne e 6 righe .

Va bene se preferisci un orientamento orizzontale. Basta modificare le posizioni delle porte nel codice JavaScript, poiché avrai 6 colonne e 4 righe . Se hai la tua immagine, crea una cartella chiamata / images e salvala.

Questa sarà la nostra unica risorsa di immagine per questo progetto.

Per i file JavaScript creare una cartella / scripts all'interno della cartella principale. Inserisci due file di testo vuoti e nominali come calendar.js e messages.js . Calendar.js manterrà la funzionalità, mentre messages.js conterrà la matrice di messaggi che compaiono quando l'utente "apre" (fa clic sulle porte).

Avremo anche bisogno di un file HTML e CSS, quindi crea due file vuoti nella cartella principale e dai loro i nomi index.html e style.css .

Quando sei pronto hai le risorse e la struttura dei file necessari per realizzare questo progetto, e la tua cartella di root ha un aspetto simile al seguente:

Passaggio 2: crea l'HTML

Il codice HTML che usiamo è piuttosto semplice. Il foglio di stile CSS è collegato nel sezione, mentre i due file JavaScript sono inclusi nella parte inferiore della sezione. Quest'ultimo è necessario, perché se inseriamo gli script nel sezione, il codice non verrebbe eseguito, in quanto utilizza gli elementi della pagina HTML caricata .

Il Calendario dell'Avvento stesso è posto all'interno del

tag semantico. Carichiamo l'immagine di Natale come un Elemento HTML, e non come proprietà di sfondo CSS, perché in questo modo possiamo facilmente accedervi come un elemento del DOM.

Sotto l'immagine posizioniamo una lista non ordinata vuota con il selettore di ID "adventDoors" che verrà popolato dagli script. Se l'utente non ha JavaScript abilitato nel proprio browser, vedrà semplicemente un'immagine natalizia semplice.

 Calendario dell'avvento 
 (function () {var doors = []; for (var i = 0; i <24; i ++) {doors [i] = new Door (myCal, i + 1); doors [i] .content ();} return doors;}) (); 

• dimostrazione
• Scarica fonte

10 alternative leggere a Bootstrap & Foundation

Scegliere la struttura giusta che è la soluzione perfetta per i tuoi progetti potrebbe essere un po 'travolgente - ci sono molte tra cui scegliere. Forse, vuoi andare con scelte popolari come Bootstrap o Foundation, ma se il tuo sito web sarà abbastanza semplice, non avrai bisogno della maggior parte dei componenti e dei materiali inclusi nel pacchetto predefinito.L

(Consigli tecnici e di design)

12 ebook gratuiti per insegnarti blogging e content marketing

Per coloro che sono seri sul blogging o semplicemente non riescono a far decollare il proprio blog, a volte tutto ciò di cui si ha bisogno è qualche consiglio di prima mano degli esperti stessi. Ti ascoltiamo e dato che ci sono molti ebook in giro online, abbiamo realizzato i legwork e raccolto 12 di questi eBook che sono grandi raccolte di esperienze, conoscenze e suggerimenti sui blog che sono il risultato di anni di tentativi ed errori da parte di coloro che ci sono stato, fatto.Q

(Consigli tecnici e di design)