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

Créez des graphiques animés avec Google Data GIF Maker

Les tableaux de données ne sont pas exactement les choses les plus intéressantes à regarder, en particulier celles qui débordent de données. Si vous trouvez que le tableau de données standard est incapable de garder votre attention, Google a un nouvel outil disponible qui peut être en mesure de résoudre ce problème. C'e

(Conseils techniques et de conception)

8 choses que vous devriez savoir sur Android M

Android M, la prochaine génération d'Android a été annoncée (bien que pas de mot sur ce que M sera encore). Google a récemment présenté le Developer Preview de la dernière version de son système d'exploitation mobile avancé dans Google I / O 2015. Cette nouvelle version d'Android tente d' améliorer les fondamentaux avec de grands changements et de nombreuses corrections de bugs.Après avoir

(Conseils techniques et de conception)