Devoir - Semaine 3 encore la suite de la calculatrice!

Le devoir de cette semaine consistera à transporter votre calculatrice JavaScript dans une application web simple en utilisant HTML et CSS et bien sûr, JavaScript.

Arborescence du projet

Assurez-vous de bien structurer votre projet en utilisant les dossiers suivants :

• index.html : Le fichier HTML principal de votre application web.
• styles/ : Un dossier contenant vos fichiers CSS.
• styles/main.css : Le fichier CSS principal pour le style de votre application.
• scripts/ : Un dossier contenant vos fichiers JavaScript.
• scripts/index.js : Le fichier JavaScript principal pour la logique de votre application.
• images/ : Un dossier pour stocker les images utilisées dans votre application (si nécessaire).

Instructions

Dans un premier temps, vous allez devoir vous assurer d'intégrer les éléments suivants dans votre application web :

• Une nav-bar contenant le nom de votre application, un logo et un lien vers la page d'accueil et vers la page d'historique des calculs.
• Un footer simple contenant votre nom, le sigle du cours et l'année en cours.
• Un champ texte permettant de saisir les deux nombres et l'opération à effectuer.
• Un bouton pour effectuer le calcul. (voir le code ci-dessous pour les détails)
• Afficher le résultat du calcul sur la page web après avoir cliqué sur le bouton.
• Vous devez avoir une page de votre application web qui affiche l'historique des calculs effectués durant la session.
• Vous devez utiliser bootstrap pour ce devoir. (ajouter le cdn dans le head de votre index.html)

Tous les éléments précédemment ajoutés lors des premiers devoirs doivent être conservés et utilisés.

Truc 💡

Afin d'être en mesure d'effectuer le calcul lors du clic du bouton, nous allons devoir ajouter un "evénement" sur le bouton. Je vous fournis le code pour être en mesure d'ajouter ce comportement, sachez que nous allons le voir en détail lors du prochain cours.

<button onclick="effectuerCalcul()" class="btn btn-primary">Calculer</button>

En ajoutant l'attribut HTML onClick au bouton , nous indiquons que lorsque l'utilisateur clique sur ce bouton, la fonction JavaScript effectuerCalcul() doit être exécutée. Vous devrez définir cette fonction dans votre fichier index.js pour qu'elle contienne la logique nécessaire pour effectuer le calcul en fonction des entrées de l'utilisateur.

Bien que nécessaire pour ce devoir, la gestion du onClick ne sera pas présente lors du mini-test #1.

Remise

Il s'agit d'un devoir formatif et nous y reviendrons ensemble en classe lors du prochain cours.