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

12 estensioni di Chrome per sfruttare al meglio Google Drive

Senza dubbio Google Drive è uno straordinario servizio di archiviazione cloud sincronizzato che ti consente di archiviare e accedere in modo sicuro a file, cartelle, foto e video da qualsiasi luogo.Per migliorare la sua usabilità e aiutarti a ottenere il massimo da Google Drive, è disponibile un gran numero di diverse estensioni. I

(Consigli tecnici e di design)

20 suggerimenti e trucchi per Apple Most Wanted

Hai una domanda su come fare qualcosa sul tuo nuovo Apple Watch? Visto che questa è la prima generazione di Apple Watch, probabilmente hai molte domande su come usarlo. Per cominciare, Apple Watch deve essere abbinato al tuo iPhone. Questo gli consente di fare molte cose come sincronizzare foto, musica, ricevere notifiche app e localizzare il tuo iPhone.

(Consigli tecnici e di design)