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

3 consigli essenziali per creare una password sicura e facile da ricordare

Le password sono un dolore : devono essere buone, sicure, non facili da decifrare e allo stesso tempo, il tipo che possiamo ricordare facilmente. Se hai mai sperimentato l'inconveniente di dimenticare una password, il dolore diventa reale. Ecco perché hai bisogno dell'aiuto degli esperti.1 - Password basate su una frase completa Un modo per creare una password sicura è basare la password su una frase completa .

(Consigli tecnici e di design)

Suggerimenti SEO di base per immagini che dovresti sapere

Sono sicuro che conosci i consigli SEO che puoi utilizzare sul tuo sito. Abbiamo pubblicato in precedenza una guida definitiva all'ottimizzazione Web (Tips & Best Practices) e una miniserie per una Guida per principianti al SEO (consulta anche la Parte 2 e la Parte 3).Se desideri ottimizzare la SEO per le tue immagini, c'è la guida definitiva di Jake all'ottimizzazione JPEG per il Web e naturalmente molti strumenti che puoi utilizzare per aiutarti a verificare le prestazioni e la velocità del tuo sito.

(Consigli tecnici e di design)