Les fêtes de fin d'année arrivent bientôt, pourquoi ne pas réaliser un calendrier de l'avent en ligne pour vos proches ?
Ce micro-projet est un calendrier de l'avent, il fonctionne avec Bootstrap 4 et Vue.JS 2. Les données des messages sont en "dur" dans la page au format JSON.
Le principe du calendrier est d'afficher des cases pour chaque jour avant le jour de Noël. Le visiteur pourra consulter les cases dont le jour est passé ou le jour même (Ouvre Si JourDeLaCase <= Aujourd'hui).
Évidemment dans ce calendrier il est facile de tricher (clic droit, inspecter l'élément).
Mise en place
Le projet est minimaliste, il comporte uniquement un fichier "index.html" et un dossier "img" contenant les 24 images.
Créez donc un fichier "index.html", et intégrez-y la structure de base ainsi que les dépendances nécessaires à ce calendrier de l'avent.
Les dépendances sont :
- Bootstrap 4.1.3
- JQuery 3.3.1
- Popper 1.14.3
- Vue.JS 2.5.17
<!-- index.html -->
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Calendrier de l'avent 2019</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
</body>
</html>
Il vous faudra aussi 24 images PNG. Dans mon calendrier, j'ai utilisé des images de 257 pixel de côté. Votre arborescence du projet doit ressembler à ceci :
| index.html
|
\---img
1.png
2.png
3.png
4.png
5.png
6.png
7.png
8.png
9.png
10.png
11.png
12.png
13.png
14.png
15.png
16.png
17.png
18.png
19.png
20.png
21.png
22.png
23.png
24.png
Parfait ! Maintenant, passons à l'initialisation de Vue.JS en mode light (aucune console nécessaire, cette méthode permet d'utiliser Vue.JS dans tous les environnements possibles).
Dans votre fichier "index.html", avant la fermeture du body, insérez le code suivant :
<script>
let app = new Vue({
el: '#app',
data: {},
methods: {}
})
</script>
Ce script permet l'initialisation de l'objet Vue.JS. Vue.JS s'exécutera dans l'élément désigné par l'id "app". Nous attribueront des données à Vue.JS ainsi qu'une méthode pour l'affichage des modals.
Développons !
Script
Occupons-nous de la partie Vue.JS
Pour commencer, nous allons ajouter les données. Les données dans Vue.JS sont au format JSON (quelle surprise !). Nous allons les écrire dans le script où nous avons initialisé Vue.JS.
Pour ce projet, nous avons donc besoin de 24 objets "message" contenant 3 données (numéro, image et contenu), nous aurons aussi besoin d'une variable "modal" pour stocker le contenu du message à afficher.
Saisie des données dans la partie Vue.JS du fichier "index.html" :
<script>
let app = new Vue({
el: '#app',
data: {
modal : '',
messages: [
{
'number' : 1,
'image' : 'img/1.png',
'content' : 'Message'
},
{
'number' : 2,
'image' : 'img/2.png',
'content' : 'Message'
},
{
'number' : 3,
'image' : 'img/3.png',
'content' : 'Message'
},
{
'number' : 4,
'image' : 'img/4.png',
'content' : 'Message'
},
{
'number' : 5,
'image' : 'img/5.png',
'content' : 'Message'
},
{
'number' : 6,
'image' : 'img/6.png',
'content' : 'Message'
},
{
'number' : 7,
'image' : 'img/7.png',
'content' : 'Message'
},
{
'number' : 8,
'image' : 'img/8.png',
'content' : 'Message'
},
{
'number' : 9,
'image' : 'img/9.png',
'content' : 'Message'
},
{
'number' : 10,
'image' : 'img/10.png',
'content' : 'Message'
},
{
'number' : 11,
'image' : 'img/11.png',
'content' : 'Message'
},
{
'number' : 12,
'image' : 'img/12.png',
'content' : 'Message'
},
{
'number' : 13,
'image' : 'img/13.png',
'content' : 'Message'
},
{
'number' : 14,
'image' : 'img/14.png',
'content' : 'Message'
},
{
'number' : 15,
'image' : 'img/15.png',
'content' : 'Message'
},
{
'number' : 16,
'image' : 'img/16.png',
'content' : 'Message'
},
{
'number' : 17,
'image' : 'img/17.png',
'content' : 'Message'
},
{
'number' : 18,
'image' : 'img/18.png',
'content' : 'Message'
},
{
'number' : 19,
'image' : 'img/19.png',
'content' : 'Message'
},
{
'number' : 20,
'image' : 'img/20.png',
'content' : 'Message'
},
{
'number' : 21,
'image' : 'img/21.png',
'content' : 'Message'
},
{
'number' : 22,
'image' : 'img/22.png',
'content' : 'Message'
},
{
'number' : 23,
'image' : 'img/23.png',
'content' : 'Message'
},
{
'number' : 24,
'image' : 'img/24.png',
'content' : 'Message'
},
],
},
methods: {}
})
</script>
Nous avons maintenant les données, il ne reste plus qu'à écrire la méthode d'affichage du message.La méthode va prendre l'objet "message" en paramètres. Cette méthode comparera la date du jour avec la date de la case (le numéro étant le jour, il suffit d'y rajouter le mois et l'année pour obtenir une date d'ouverture) et affichera un message en fonction du résultat de la comparaison.
Écrivons la méthode dans la partie "methods" de Vue.JS :
methods: {
setModal(message){
let today = new Date();
let calDate = new Date('2019-12-' + message.number);
calDate.setDate(calDate.getDate()-1);
if(calDate >= today){
this.modal = 'Hep Hep Hep, on ne triche pas !'
}
else{
this.modal = message.content;
}
}
}
Ok ! La partie Vue.JS dans le script est terminée.
HTML
Maintenant, occupons-nous de la partie HTML.
Pour commencer, nous allons ajouter un entête graphique à notre page "index.html". Pour faire ça, on utilisera la classe Bootstrap Jumbotron. Écrivez le code ci-dessous dans votre fichier "index.html" juste après
l'ouverture de la balise body.
<div class="jumbotron text-center" style="margin-bottom:0; background-color: darkred; color: white;">
<h1>Calendrier de l'avent 2019</h1>
<p>Hoo Hoo Hoooooo ! Voici quelques indices pour ton calendrier de l'avent :p</p>
</div>
Dans ce jumbotron, on utilise bien les classes bootstrap "jumbotron" et "text-center", de plus, le style est personnalisé en "dur" dans la balise div (ce n'est pas une bonne pratique générale en web, mais dans le cadre
d'un projet en un seul fichier et avec une seule utilisation dans la page, c'est justifié).
Maintenant, codons la partie affichage des images.
Pour exécuter le code de Vue.JS, nous allons créer une div avec un id "app", comme nous l'avons paramétré dans Vue.JS. Ensuite l'affichage responsive est géré par Bootstrap.
Un container-fluid pour prendre 100% de la largeur de l'écran et la gestion des grid avec col-lg-2 col-md-3 col-sm-6 col-xs-12.
Ensuite, Vue.JS nous permet de réaliser une boucle foreach de nos messages : v-for="message in messages".
Dans cette boucle, au niveau de la balise a, nous faisons appel à la méthode setModal que nous avons codée en utilisant la fonction @click() qui déclenchera cette méthode en cliquant sur le lien. L'élément image récupère l'url
contenue dans l'objet message à l'aide de la méthode "v-bind:src".
<div class="container-fluid" style="margin-top:30px" id="app">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-12" v-for="message in messages">
<a href="" data-toggle="modal" data-target="#m" @click="setModal(message)">
<img v-bind:src="message.image" class="img-fluid mx-auto d-block">
</a>
</div>
</div>
</div>
Félicitation ! Vous avez terminé. Vous pouvez remplacer les images et les messages et votre calendrier sera prêt.
Vous pouvez télécharger l’archive complète du projet. Elle contient le fichier index.html ainsi qu’un dossier contenant 24 images.
Télécharger