hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


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 

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 idées d'escaliers modernes pour pimenter votre maison

20 idées d'escaliers modernes pour pimenter votre maison

Les conceptions d'escalier ont toujours été assez basiques parce que qui passe le temps à rénover le regard d'un escalier quand vous avez l'intérieur entier d'une maison pour concevoir, droit? Mais quand le budget le permet et quand le sens du design s'enflamme, nous obtenons parfois des conceptions d'escaliers plutôt intéressantes, comme celles-ci.Il n&#

(Conseils techniques et de conception)

50 beaux thèmes Tumblr triés sur le volet

50 beaux thèmes Tumblr triés sur le volet

Tumblr est l' une des plateformes de médias sociaux les plus intéressantes et accueille des personnes créatives qui aiment partager leurs pensées et leurs idées avec des personnes de même intérêt. Cependant, pour attirer plus de visiteurs sur votre blog, vous avez besoin d'un thème Tumblr attrayant que vous pouvez également personnaliser - et c'est ce sur quoi porte cet article.Dans ce p

(Conseils techniques et de conception)