Codage d'un calendrier de l'avent en JS

Pour créer certains éléments et effets, il est parfois essentiel d’utiliser du JavaScript comme dans ce projet.

Besoin de la construction d'un site web ?

Pour assurer votre visibilité en ligne, demandez la réalisation d’un site web.

Un calendrier de l'avent

Dans le cadre d’un projet de groupe à l’école WIS durant un module de JavaScript, je devais créer un site web proposant différentes fonctionnalités à l’aide du langage JavaScript et lui donner un univers.

Pour cela, j’ai dû réfléchir à ce que je voulais faire comme concept et de quoi j’avais besoin pour le mettre en oeuvre avant de bien-sûr le réaliser.

Un environnement de développement (IDE) complet.

Pour ce projet j’ai utiliser de nombreuses ressources afin de développer toutes les fonctionnalité que je souhaitais

  • Langages : HTML, SASS, PHP, JS
  • Ressources : JQuery Sticky, Bootstrap, Google Maps, Owl Carousel, AJAX, ScrollReveal, NPM
  • IDE : PHP Storm

La réalisation

Je voulais donc en période de Noël réaliser un calendrier de l’avent sur un site web. 

Toutes mes dépendances ont été installés via NPM.

Pour cela, nous avons donc un header qui change de couleur et de taille au scroll, des petites cards qui simulent celles d’un calendrier de l’avent avec un jour spécifique qui arrivent avec une animation réalisés avec ScrollReveal, un slider de cadeaux réalisés avec Owl Carousel qui tourne automatiquement avec un affichage de 5 cadeaux et qui s’adapte en version responsive et des boutons précédents et suivants, un encart qui sur le scroll sur le côté droit avec JQuery Sticky et un lien qui redirige avec une super musique sur Youtube. 

Ensuite nous retrouvons une Google Maps grâce à l’API et un pointeur qui indique la maison du père noël pour le rencontrer.

Enfin, pour envoyer sa lettre au père noël, un petit formulaire est placé en bas. L’utilisateur entre ses ifnormations et peut soumettre son message. Grâce à un petit spinner dans le bouton, on voit que le formulaire traite le message. Enfin si le message a été envoyé avec succès alors on affiche un message sympathique, sinon on affiche un message d’erreur dans le car contraire. Tout cela est traité entièrement en AJAX.

Bien évidemment des petits flocons de neiges viennent agrémenter le tout !