TP 1 - Resto chez Marie!

Votre cousine Marie vous demande de lui venir en aide pour créer un site web pour son resto : Le Resto chez Marie! 🍽️

Pondération

Le TP1 vaut pour 10% de la note finale du cours.

Instructions techniques

• Travail individuel.
• Utilisation de HTML, css, JavaScript, Scss.
• Utiliser Bootstrap pour la mise en page et le style de base.
  • Utiliser SCSS pour personnaliser le thème de Bootstrap (couleurs, polices, etc.).
• Utiliser JavaScript pour gérer les interactions utilisateur, la validation des formulaires.
  • Utiliser des fonctions pour organiser votre code et éviter la duplication de code.
• Utiliser les fonctions de manipulation du DOM pour effectuer les interactions demandées
  • document.get....id, document.querySelector, etc.
  • createElement, appendChild, etc.
  • Ajouter des événements sur les éléments HTML (ex.: click, submit, etc.)
• Utilisation du localStorage pour stocker les données du panier et des réservations de manière persistante.

Structure du projet

La structure du projet devra être créer avec Vite. Nous allons voir dans le cour 6 comment le faire.en attendant, simplement travailler dans une structure standard avec un fichier index.html, un dossier styles/ pour les fichiers CSS, un dossier scripts/ pour les fichiers JavaScript, et un dossier images/ pour les images utilisées dans le projet.

Mandat

1. Vos pages devront contenir une barre de navigation en haut de la page et un footer en bas de la page.

   • La barre de navigation devra inclure le nom du restaurant et des liens vers les deux pages (menu et réservation) et une icône pour le panier.
   • Le footer devra inclure le nom du restaurant et l'année en cours (elle doit être dynamique et non "hardcoder").

2. Créer une page de visualisation du menu avec deux menus différents (ex.: Menu du midi et Menu du soir). Chaque menu devra avoir au moins 5 items avec les caractéristiques suivantes :

   • Nom
   • Description
   • Prix
   • Allergènes (ex.: gluten, lactose, etc.)
   • Un bouton "Ajouter au panier" avec possibilité d'ajouter une quantité (ex.: 1, 2, 3, etc.) Si vous désirez ajouter le même item de nouveaux, assurez-vous de mettre à jour la quantité de l'item dans le panier au lieu de créer une nouvelle entrée pour le même item.

   Lorsque l'utilisateur clique sur le bouton "Ajouter au panier", l'item sélectionné avec la quantité sélectionnée devra être ajouté à un panier qui sera accessible via un bouton dans la barre de navigation.

3. Le contenu du panier sera accessible via un bouton dans la barre de navigation. Un tooltip devra être présent lors du survol de l'icône pour signifier qu'il s'agit du panier. Suite au clic sur le bouton, un modal devra s'afficher avec les informations suivantes :

   • Les items ajoutés au panier avec leur quantité et leur prix total
   • Pour chaque item, un bouton pour supprimer l'item du panier
   • Un bouton pour vider tout le panier

   Vous devez sauvegarder le contenu du panier dans le localStorage pour que les données soient persistantes même après le rafraîchissement de la page.

4. Créer une page de réservation où les utilisateurs pourront réserver une table. Le formulaire de réservation devra inclure les champs suivants :

   • Nom
   • Prénom
   • Adresse courriel
   • Date de réservation (utiliser un calendrier)
   • Heure de réservation (utiliser un menu déroulant)
   • Nombre de personnes
   • Autres demandes spéciales (emplacement utilisé pour le code promotionnel)
   • Un bouton de soumission

   Vous devez sauvegarder la réservation dans le localStorage pour que les données soient persistantes même après le rafraîchissement de la page. Assurez-vous de stocker dans un tableau, un objet concenant les données des réservations. De cette manière, on va pouvoir stocker plusieurs réservations. Lors de la soumission du formulaire, vous devez effectuer les validations suivantes :

   • Tous les champs doivent être remplis
   • L'adresse courriel doit être dans un format valide (ex.: présence du caractère @)
   • La date doit être dans le futur
   • Si un des champs n'est pas valide, un message devra être affiché à l'utilisateur sous le champ en question.

   Une fois la réservation effectuée, une confirmation devra être affichée à l'utilisateur à l'aide d'un toast. Vous devez vider le formulaire après la soumission afin que l'utilisateur puisse faire une nouvelle réservation s'il le souhaite.

5. Ajouter une fonctionnalité promotionnelle : Lorsqu'un utilisateur visite la page de réservation, un modal devra s'afficher mentionnant l'offre promotionnelle en cour. Il s'agit du code suivant : "MIAM15" qui donne accès à 15% de rabais.

   Après 1 seconde, un bouton pour fermer le modal devra apparaître dans le modal.

6. Ajuster le style visuel du site pour qu'il soit harmonieux avec le thème du restaurant. Voici le thème en question :

   • Zen Red - #E63946
   • Rice White - #F1FAEE
   • Calm Blue - #A8DADC
   • Ocean Deep - #457B9D
   • Navy Ink - #1D3557
   • Police : "Playfair Display" et "Inter", vous pouvez les importer via Google Fonts.

   Assurez-vous d'utiliser le SCSS pour personnaliser le thème de Bootstrap en utilisant les éléments vus ci-haut.

Remise

Vous devrez me remettre sur LÉA votre projet sous forme d'un fichier zip contenant tous les fichiers de votre projet.

Date de remise

Le projet doit être remis au plus tard avant 23h55 le 20 mars 2026. Tout projet remis après cette date sera considéré comme en retard et une pénalité s'appliquera.

Critère de correction

Je vais vous communiquer les critères de corrections au courant de la journée du 20 février.

• Respect du thème visuel suggéré (10%)
  • Style visuel ajusté selon les consignes
  • Utilisation du SCSS pour la personalisation de Bootstrap
• Page de visualisation de menu (20%)
  • Présence de 2 menus différents
  • Présence des éléments demandés
  • Possibilité d'ajouter au panier un item
• Page de réservation (30%)
  • Présence de tous les champs demandés
  • Validations effectuées sur les champs demandés
  • Respect du format pour stocker la réservation
  • Utilisation du local storage
• Panier (20%)
  • Tooltip et icône
  • Utilisation du local storage
  • Aucuns items dupliqués dans le panier
• Qualité générale (20%)
  • Respect des consignes
  • Qualité générale du code