Comment construire un calendrier de l'Avent simple en JavaScript

L'Avent est la période d'attente et de préparation à Noël qui commence quatre dimanches avant la veille de Noël. Le passage du temps de l'Avent est traditionnellement mesuré à l'aide d'un calendrier de l'Avent ou d'une couronne de l'Avent. Bien que le début de l'Avent ne soit pas une date fixe, les calendriers de l'Avent commencent généralement le 1er décembre.

Basés sur les coutumes locales, les Calendriers de l'Avent peuvent avoir différents designs, mais le plus souvent ils prennent la forme de grandes cartes rectangulaires avec 24 fenêtres ou portes marquant les jours entre le 1er et le 24 décembre. Les portes cachent messages, poèmes, prières ou petites surprises.

Dans ce post, je vais vous montrer comment faire un calendrier de l'Avent en JavaScript orienté objet . Comme il est fait en JavaScript vanilla, vous pouvez facilement placer le code dans votre propre site Web.

• Démo
• Source de téléchargement

Conception de calendrier JavaScript

Notre calendrier de l'Avent aura 24 portes sur une image de fond sur le thème de Noël. Chaque porte cachera une citation liée à Noël qui apparaîtra sous la forme d'un message d'alerte lorsque l'utilisateur cliquera sur la porte . Les portes restent fermées jusqu'au jour donné, comme c'est le cas avec le calendrier de l'Avent réel; les portes ne peuvent pas être ouvertes avant le bon jour.

Les portes qui sont déjà activées auront une couleur de bordure et d'arrière-plan différente (blanche) que les couleurs désactivées (vert clair). Nous allons utiliser HTML5, CSS3 et JavaScript pour préparer notre calendrier de l'Avent qui ressemble à ceci:

Étape 1 - Créer une structure de fichiers et des ressources

Tout d'abord, nous devons choisir une belle image de fond. J'ai choisi une orientation portrait de Pixabay, donc mon agenda contiendra 4 colonnes et 6 lignes .

C'est bien si vous préférez une orientation paysage. Il suffit de changer les positions des portes dans le code JavaScript, car vous aurez 6 colonnes et 4 lignes . Si vous avez votre image, créez un dossier appelé / images et enregistrez-le.

Ce sera notre seule ressource d'image pour ce projet.

Pour les fichiers JavaScript, créez un dossier / scripts dans votre dossier racine. Placez-y deux fichiers texte vides et nommez-les calendar.js et messages.js . Calendar.js tiendra la fonctionnalité, tandis que messages.js contiendra le tableau de messages qui apparaît lorsque l'utilisateur "ouvre" (clique sur) les portes.

Nous aurons également besoin d'un fichier HTML et CSS, créez donc deux fichiers vides dans votre dossier racine et donnez-leur les noms index.html et style.css .

Lorsque vous êtes prêt, vous disposez des ressources et de la structure de fichiers dont vous aurez besoin pour accomplir ce projet, et votre dossier racine ressemble à ceci:

Étape 2 - Créer le HTML

Le code HTML que nous utilisons est assez simple. La feuille de style CSS est liée dans le section, tandis que les deux fichiers JavaScript sont inclus dans le bas de la section. Ce dernier est nécessaire, car si nous mettons les scripts dans le section, le code ne serait pas exécuté, car il utilise les éléments de la page HTML chargée .

Le calendrier de l'Avent lui-même est placé à l'intérieur

étiquette sémantique. Nous chargeons l'image de Noël en tant que Élément HTML, et non comme une propriété d'arrière-plan CSS, car de cette façon, nous pouvons facilement y accéder en tant qu'élément du DOM.

En dessous de l'image, nous plaçons une liste non ordonnée vide avec le sélecteur d'identifiant "adventDoors" qui sera rempli par les scripts. Si l'utilisateur n'a pas activé JavaScript dans son navigateur, il ne verra qu'une simple image de Noël.

 Calendrier de l'Avent 
 (function () {var doors = []; pour (var i = 0; i <24; i ++) {doors [i] = nouvelle porte (myCal, i + 1); doors [i] .content ();} les portes de retour;}) (); 

• Démo
• Source de téléchargement

20 Skylines du monde: alors vs maintenant

La vitesse et l'ampleur d'un changement dans la ligne d'horizon sont représentatives de la rapidité avec laquelle une ville a changé au cours d'un siècle ou plus. D'autres se développent en quelques décennies . Par exemple, l'un des changements les plus importants dans une ville doit être Dubaï, qui, au cours des 20 dernières années, s'est transformée d'un désert à devenir la ville la plus peuplée des Émirats arabes unis.Dans ce post,

(Conseils techniques et de conception)

Saisie de la couleur dominante de l'image à l'arrière-plan avec AdaptiveBackgrounds.js

Lors de la présentation de quelque chose sur le Web, certains développeurs trouvent souvent difficile de décider quels arrière-plans sont les plus adaptés à l'utilisation. Une bonne combinaison de l'arrière-plan avec le bon contenu peut affecter considérablement l'expérience de l'utilisateur. Pour ce

(Conseils techniques et de conception)