Comment construire un calendrier de l'avent simple en JavaScript
L'avent est la période d'attente et de préparation de Noël qui commence quatre dimanches avant la veille de Noël. La mesure du temps de l’Avent se mesure traditionnellement à 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..
Selon les coutumes locales, les calendriers de l’avent peuvent avoir différentes conceptions, 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 des messages, des poèmes, des prières ou des 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 vanille, vous pouvez facilement insérer le code sur 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 d'arrière-plan sur le thème de Noël. Chaque porte cachera une citation liée à Noël qui apparaît sous la forme d'un message d'alerte lorsque l'utilisateur clique sur la porte. Les portes restent fermées jusqu'au jour donné, comme c'est le cas avec le calendrier de l'Avent dans la vie réelle; les portes ne peuvent pas être ouvertes avant le bon jour.
Les portes déjà activées auront une bordure et une couleur d'arrière-plan (blanc) différentes de celles qui sont 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 fichier et des ressources
Tout d’abord, nous devons choisir une belle image d’arrière-plan. J'en ai choisi un avec l'orientation portrait de Pixabay afin que mon calendrier contienne 4 colonnes et 6 rangées.
C'est bien si vous préférez une orientation paysage. Il suffit de changer les positions des portes dans le code JavaScript, comme vous aurez 6 colonnes et 4 rangées. 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 / scripts dossier dans votre dossier racine. Placez-y deux fichiers texte vides et nommez-les. calendar.js et messages.js. Calendrier.js tiendra la fonctionnalité, tandis que messages.js contiendra le tableau de messages qui apparaissent lorsque l'utilisateur “ouvre” (clique sur) les portes.
Nous aurons également besoin d’un fichier HTML et d’un fichier CSS. Créez donc deux fichiers vides dans votre dossier racine et nommez-les. index.html et style.css.
Lorsque vous êtes prêt, vous disposez des ressources et de la structure de fichiers nécessaires à la réalisation de ce projet. Le dossier racine ressemble à ceci:
Étape 2 - Créer le code HTML
Le code HTML que nous utilisons est assez simple. La feuille de style CSS est liée dans le
section, tandis que le 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 utilise les éléments de la page HTML chargée.Le calendrier de l’avent lui-même est placé à l’intérieur du Elément HTML, et non en tant que propriété d'arrière-plan CSS, car nous pouvons ainsi y accéder facilement en tant qu'élément du DOM.
Au-dessous de l'image, nous plaçons une liste non ordonnée vide avec le “adventDoors” sélecteur id 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 Calendrier de l'Avent
Étape 3 - Remplissez le “messages” Tableau
Nous avons besoin de 24 citations de Noël pour peupler le “messages” tableau. J'ai choisi le mien de GoodReads.
Ouvrez le scripts / messages.js fichier; nous placerons les guillemets ici pour les séparer de la fonctionnalité. le messages array est un tableau dans un tableau, chaque élément du tableau externe contient un autre tableau avec deux éléments: une citation et son auteur..
Remplissez le tableau avec vos citations préférées en respectant la syntaxe suivante:
var messages = [["Citation 1", "Auteur 1"], ["Citation 2", "Auteur 2"],… ["Citation 24", "Auteur 24"]];
Étape 4 - Ajouter des styles CSS de base pour les portes
Pour créer les styles CSS nécessaires aux portes, nous devons imaginer la conception finale, car les portes elles-mêmes seront créées avec JavaScript dans les étapes suivantes..
Nous devons créer 4 colonnes et 6 rangées de rectangles alignés correctement. Pour cela, nous allons utiliser le position: relative et le position: absolue Règles CSS. Comme la position exacte changera de porte en porte, nous ajouterons le Haut, bas, la gauche, et droite propriétés dans JavaScript, dans le CSS, il suffit d'ajouter une position relative au conteneur (liste non ordonnée dans le HTML) et des positions absolues pour les éléments de la liste (ils seront également ajoutés dans le JS).
L’autre chose importante dans la feuille de style est de créer un design différent pour les états désactivé et activé. le .désactivée le sélecteur sera ajouté au désactivé par JavaScript.
Pour mon calendrier de démonstration, j'ai défini une bordure blanche unie et des polices blanches pour les portes activées avec un arrière-plan blanc transparent en survol; et une bordure vert clair, des polices et un arrière-plan vert clair transparent pour les personnes handicapées. Si vous n'aimez pas ce design, vous pouvez changer les couleurs et les styles selon vos souhaits.
Placez le code suivant (ou vos règles de style modifiées) dans votre style.css fichier.
ul # adventDoors position: relative; style de liste: aucun; rembourrage: 0; marge: 0; #adventDoors li position: absolute; #adventDoors li a color: #fff; largeur: 100%; hauteur: 100%; taille de police: 24px; text-align: center; affichage: flex; direction de flexion: colonne; justifier-contenu: centre; texte-décoration: aucun; bordure: 1px #fff solide; #adventDoors li a: not (.disabled): hover color: #fff; couleur de fond: transparent; couleur de fond: rgba (255,255,255,0,15); #adventDoors li a.disabled border-color: # b6fe98; couleur de fond: rgba (196,254,171,0,15); couleur: # b6fe98; curseur: par défaut;
Étape 5 - Créer les variables globales
À partir de cette étape, nous ne travaillerons qu'avec le scripts / calendar.js fichier, alors maintenant ouvrons cette place. Notre calendrier de l'avent utilisera deux variables globales.
le myCal La variable contient l’image de calendrier en tant qu’objet JS. L'image a déjà été ajoutée à la index.html fichier à l'étape 2. Nous allons placer les portes sur cette image à l'étape 7. Nous capturons le code HTML associé. élément marqué du “adventCal” identifiant en utilisant la méthode DOM getElementById (). le myCal variable sera un objet HTMLImageElement DOM.
le date actuelle variable contient la date du jour afin que notre script puisse facilement décider si une porte doit être activée ou désactivée. Créer date actuelle nous instancions un nouvel objet de la classe Date JavaScript.
Placez l'extrait de code suivant dans la partie supérieure de votre calendar.js fichier.
var myCal = document.getElementById ("adventCal"); var currentDate = new Date (); Étape 6 - Créez le “Porte” Classe
Comme nous avons besoin de 24 portes, la façon la plus simple de le faire est de créer un “Porte” classe, et plus tard instancier 24 fois.
Notre classe de porte a deux paramètres, calendrier et journée. Pour le calendrier paramètre, nous aurons besoin de passer l'image de Noël qui servira d'arrière-plan. Pour le journée paramètre nous aurons besoin de passer le jour actuel de Décembre sous la forme d'un entier.
Nous allons passer les valeurs exactes des paramètres à la dernière étape (étape 8), lors de l'instanciation des objets à 24 portes.
Nous allons faire 5 propriétés et 1 méthode pour la classe Door. Dans cette étape, nous ne passerons que par les 5 propriétés, et je vais expliquer la contenu() méthode dans la prochaine étape.
le “largeur” Et “la taille” Propriétés
le largeur et la taille les propriétés calculent dynamiquement la largeur et la hauteur de chaque porte (qui change en fonction de la largeur et de la hauteur de l'image d'arrière-plan).
Les multiplicateurs 0,1 et 0,95 sont dans l'équation pour laisser un peu d'espace pour les marges, entre chaque porte et autour des côtés du calendrier, aussi.
le “adventMessage” propriété
le adventMessage propriété contient le contenu des messages d’alerte, à savoir les guillemets et les auteurs correspondants que notre messages.js fichier détient. le adventMessage la propriété prend une citation et un auteur de la messages[] tableau, en fonction de la date actuelle.
Pour le 1 décembre adventMessage propriété prend le premier élément du tableau externe qui est messages [0], comme les tableaux sont basés sur zéro en JavaScript.
Pour la même raison, la citation du 1 er décembre est positionnée comme suit: messages [0] [0] (premier élément du tableau interne), et l'auteur correspondant peut être atteint en tant que messages [0] [1] (deuxième élément du tableau interne).
le “X”Et”y” Propriétés
Propriétés X et y tenir les positions appropriées de chaque porte que nous utiliserons dans la prochaine étape pour définir la Haut et la gauche Propriétés CSS. Ceux-ci viendront compléter les position: relative et position: absolue Les règles CSS que nous avons définies à l’étape 4 pour le conteneur de porte (ul # adventDoors) et les portes elles-mêmes (#adventDoors li). Les calculs peuvent sembler quelque peu intimidants, mais passons rapidement en revue.
le X la propriété sera utilisée par le la gauche Propriété de positionnement CSS à l'étape suivante (étape 7). Il détermine en pixels où une porte individuelle doit être placée sur l'axe des x.
Il prend la largeur de l’arrière-plan et laisse une petite marge (4%). Ensuite, avec l'aide de l'opérateur restant, il évalue dans quelle colonne il sera placé (rappelez-vous, il y aura 4 colonnes), et finalement il ajoute une petite marge (10%) à chaque porte individuelle en utilisant un multiplicateur de 1.1..
De la même manière, le y la propriété sera utilisée par le Haut Propriété de positionnement CSS, elle détermine également en pixels où une porte individuelle doit être placée sur l'axe des y.
Nous prenons la hauteur de l'image d'arrière-plan à l'aide de la propriété height du passé calendrier paramètre (qui contient un objet DOM) et laisse une marge de 4% autour des côtés verticaux du calendrier.
Ensuite, avec l'aide de la méthode Math.floor (), nous calculons dans quelle ligne un objet Door donné sera (il y aura 6 lignes).
Enfin, nous ajoutons une marge de 10% pour chaque objet Door en multipliant sa hauteur avec un multiplicateur de 1.1..
fonction Door (calendar, day) this.width = ((calendar.width - 0.1 * calendar.width) / 4) * 0,95; this.height = ((calendar.height - 0.1 * calendar.height) / 6) * 0,95; this.adventMessage = 'Jour' + jour + 'de l \' Advent \ n \ n '+' '' + messages [jour - 1] [0] + '"\ n \ n \ t' + 'par' + messages [jour - 1] [1] + '\ n \ n'; this.x = (0.04 * calendar.width + ((day - 1)% 4) * (1.1 * this.width)); this.y = - (0,96 * calendar.height - Math.floor ((day - 1) / 4) * (1.1 * this.height)); this.content = function () …;
Étape 7 - Remplissez le “Contenu()” Méthode
C'est le contenu() méthode qui affichera nos portes dans le navigateur. Tout d'abord, nous créons un nouveau nœud DOM à l'aide de la variable nœud cela va créer le
Comme la classe Door sera instanciée 24 fois dans une boucle for lors de la prochaine étape (étape 8), cela signifie que nous aurons 24
La propriété node.id de la ligne suivante ajoute un sélecteur d'identifiant unique à chaque élément de la liste (door). Nous en aurons besoin pour pouvoir parcourir correctement les jours de l'étape suivante (étape 8). De cette façon, la porte 1 aura un id =”porte1 ", La porte 2 aura un id =”door2 " sélecteur, etc.
La propriété node.style.cssText de la ligne suivante ajoute des règles CSS à chaque élément de la liste (door) à l’aide de la style =”… ” Attribut HTML utilisé pour inclure le CSS intégré dans les fichiers HTML. le node.style.cssText property utilise les propriétés de la classe Door que nous avons définies à l'étape précédente (étape 6).
Pour rendre notre objet Door cliquable, nous devons également ajouter un balise à l'intérieur des éléments de la liste. Nous y parvenons avec l'aide du innerNode variable que nous lions en tant qu’élément enfant à l’élément de liste approprié identifié par le id =”porte [i]” sélecteur (avec [i] étant le numéro du jour), en utilisant la méthode DOM appendChild () comme auparavant.
La propriété innerHTML de la ligne suivante affiche le jour actuel (1-24) en haut de la porte du navigateur, et nous ajoutons également un href =”#” attribuer à nos balises d'ancrage au moyen de la propriété href DOM.
Enfin, dans l'instruction if-else, nous évaluons si un objet Door doit être activé ou désactivé. Tout d'abord, nous examinons si nous sommes dans le 12ème mois de l'année (décembre) en utilisant la méthode getMonth () de l'objet Date. Nous devons ajouter 1, car getMonth () est basé sur zéro (janvier est le mois 0, etc.).
Ensuite, nous vérifions si la date du jour était dans le date actuelle variable globale que nous avons définie à l’étape 5 est inférieure à la journée que l'objet Door actuel représente.
Si ce n'est pas décembre ou si le jour représenté par la porte donnée est supérieur à la date actuelle, la porte doit être désactivée. Dans les autres cas, vous devez l'activer pour que les utilisateurs puissent cliquer dessus et voir le message de l'Avent associé..
Si la porte est désactivée, nous ajoutons un classe =”désactivée” sélecteur à la balise d'ancrage donnée à l'aide de la propriété className. Rappelez-vous, nous avons déjà appelé le .désactivée classe avec CSS à l'étape 4. Nous devons également définir l'attribut d'événement HTML onclick pour renvoyer false.
Si la porte est dans l'état activé, nous ajoutons le adventMessage propriété à un message d'alerte et placez-le dans l'attribut d'événement HTML onclick.
this.content = function () var node = document.createElement ("li"); document.getElementById ("adventDoors"). appendChild (noeud); node.id = "porte" + jour; node.style.cssText = "width:" + this.width + "px; height:" + this.height + "px; top:" + this.y + "px; left:" + this.x + "px ; "; var innerNode = document.createElement ("a"); document.getElementById ("porte" + jour) .appendChild (innerNode); innerNode.innerHTML = jour; innerNode.href = "#"; if ((currentDate.getMonth () + 1) < 12 || currentDate.getDate() < day ) innerNode.className = "disabled"; innerNode.onclick = function() return false; else var adventMessage = this.adventMessage; innerNode.onclick = function() alert(adventMessage); return false; ; Étape 8 - Initialiser le “Porte” Objets
Enfin, nous devons initialiser la classe Door 24 fois..
Pour ce faire, nous utilisons une expression de fonction immédiatement appelée qui est très utile ici, car nous n’avons pas besoin de variable, nous voulons uniquement exécuter le code dans la fonction une fois..
Nous créons un des portes[] tableau qui contiendra les 24 objets Door. Nous parcourons les jours de 1 à 24 (ce seront les 0-23e éléments du tableau doors [], car les tableaux sont basés sur zéro), puis nous retournons l'ensemble des portes[] tableau comprenant les objets 24 Door pour les afficher dans le navigateur.
(fonction () var portes = []; pour (var i = 0; i < 24; i++) doors[i] = new Door(myCal, i + 1); doors[i].content(); return doors; )();
- Démo
- Source de téléchargement
