Contexte du projet Un site international de "tools" en ligne situé au canada vous a contacté pour une mission freelance Vous avez été chargés de faire une tâche . votre tâche est des créer une calculatrice en javascript qui comporte les spécifications suivantes:
Votre calculatrice va contenir des fonctions pour tous les opérateurs mathématiques de base que l'on trouve généralement sur les calculatrices simples. Commencez donc par créer des fonctions pour les éléments suivants et testez-les dans la console de votre navigateur : additionner soustraire multiplier diviser.
Créez une nouvelle fonction operate qui prend un opérateur et 2 nombres, puis appelle une des fonctions ci-dessus sur les nombres.
Créez une calculatrice HTML de base avec des boutons pour chaque chiffre, chacune des fonctions ci-dessus et une touche "Egual =". Il devrait également y avoir un affichage pour la calculatrice, allez-y et remplissez-le avec quelques nombres fictifs pour que vous puissiez obtenir un aspect correct.
Ajoutez un bouton "clear". Créez les fonctions qui remplissent l'affichage lorsque vous cliquez sur les boutons numériques... vous devez stocker la "valeur d'affichage" dans une variable quelque part pour l'utiliser à l'étape suivante.
Faites fonctionner la calculatrice ! Vous devrez stocker le premier nombre qui est entré dans la calculatrice lorsqu'un utilisateur appuie sur un opérateur, et aussi enregistrer l'opération qui a été choisie et ensuite operate() sur eux lorsque l'utilisateur appuie sur la touche "=". Vous devriez déjà avoir le code qui peut remplir l'affichage, donc une fois que operate() a été appelé, mettez à jour l'affichage avec la 'solution' de l'opération. Vous devez trouver comment stocker toutes les valeurs et appeler la fonction operate avec elles. Ne vous sentez pas mal si cela vous prend du temps pour comprendre la logique.
Les bugs : faites attention et corrigez ces bogues s'ils apparaissent dans votre code : Les utilisateurs devraient pouvoir enchaîner plusieurs opérations et obtenir la bonne réponse, chaque paire de nombres étant évaluée à la fois. Par exemple, 12 + 7 - 5 * 3 = devrait donner 42.
**Votre calculatrice ne doit pas évaluer plus d'une seule paire de chiffres à la fois. Si vous entrez un nombre, puis un opérateur et un autre nombre, ce calcul doit être affiché si votre prochaine entrée est un opérateur. Le résultat du calcul doit être utilisé comme premier nombre dans votre nouveau calcul. Vous devez arrondir les réponses avec de longues décimales afin qu'elles ne débordent pas de l'écran. Si vous appuyez sur = avant d'entrer tous les chiffres ou un opérateur, vous risquez de rencontrer des problèmes ! Appuyez sur "clear" pour effacer toutes les données existantes. Assurez-vous que l'utilisateur repart vraiment de zéro après avoir appuyé sur "clear".
Affichez un message d'erreur sarcastique si l'utilisateur essaie de diviser par 0... ne le laissez pas planter votre calculatrice ! BONUS : Les utilisateurs peuvent obtenir des nombres à virgule flottante s'ils font les calculs nécessaires pour en obtenir, mais ils ne peuvent pas encore les taper.
Ajoutez un bouton . et laissez les utilisateurs entrer des décimales ! Assurez-vous cependant de ne pas les laisser en taper plus d'un : 12.3.56.5. Il est difficile de faire des maths avec ces nombres. (désactivez le bouton décimal s'il y en a déjà un dans l'affichage)
BONUS : Faites en sorte que ce soit joli ! Cela peut être un bon projet de portfolio... mais pas si c'est MAUVAIS. Faites au moins en sorte que les opérations soient d'une couleur différente de celle des boutons du clavier.
BONUS : Ajoutez un bouton "backspace", pour que l'utilisateur puisse annuler s'il clique sur le mauvais numéro.
Objectifs d'apprentissage :
Nommer les huit types de données en JavaScript. Intégrer une variable/expression String. Identifier les expressions et les opérateurs. Définir les fonctions et les méthodes. Nommez les trois opérateurs logiques. Comprendre ce que sont les opérateurs de comparaison. Comprendre ce que sont les conditionnels. Manipulation DOM. la gestion des événements .
Modalités pédagogiques Travail individuel 4 Jours
Critères de performance Clean Code Respecter cahier des charges
Modalités d'évaluation Live coding Q & R
Livrables Répertoire GitHub