Maison >interface Web >js tutoriel >Création d'une calculatrice de base en utilisant HTML, CSS et JavaScript
Création d'une calculatrice de base en utilisant HTML, CSS et JavaScript
- Mary-Kate Olsenoriginal
- 2025-01-11 22:33:45935parcourir
Créer une calculatrice fonctionnelle en JavaScript est amusant et de nombreux concepts sont utilisés tels que la manipulation DOM, la gestion des événements, la logique conditionnelle, la manipulation de chaînes, les opérations arithmétiques, l'intégration des entrées au clavier et le style CSS pour l'interface utilisateur. Dans cet article de blog, nous approfondirons le code, en décomposant chaque ligne pour comprendre ses propriétés et ses fonctionnalités. À la fin de ce blog, nous aurons une solide compréhension du fonctionnement de la calculatrice.
Commençons.
Configuration de la structure HTML
Le HTML est simple, commençant par un passe-partout standard. ci-dessous se trouve l'extrait de code pour index.html
Les sections
Le la balise renvoie à un fichier JavaScript externe, script.js, où la logique et les fonctionnalités de la calculatrice sont définies. Ce fichier externe gère les interactions et les calculs de l'utilisateur, permettant à la calculatrice d'effectuer les opérations comme prévu.
Ici, la boîte d'affichage affiche l'entrée et affiche le résultat tandis que la boîte à boutons contient tous les boutons de la calculatrice.
Ajout de CSS pour le style
Maintenant, stylisons notre calculatrice pour la rendre visuellement attrayante et conviviale.
Décomposons le code CSS.
- Style d'emballage
La hauteur min : 100vh ; garantit que le wrapper occupe au moins toute la hauteur de la fenêtre. L'affichage : flexible ; permet une mise en page flexible, permettant l'alignement de ses enfants. Le justifier-content: center; centre le contenu horizontalement, tandis que align-items: center; centre le contenu verticalement. Enfin, la bordure : 2px noir uni ; ajoute une bordure autour de l'emballage.
- Style du conteneur de calculatrice :
L'affichage : flex ; rend le conteneur de la calculatrice flexible, permettant aux éléments enfants d'être disposés en ligne ou en colonne. La direction flex : colonne ; organise les éléments enfants verticalement. L'écart : 12px ; ajoute un espacement entre chaque section ou élément. Enfin, largeur : 500px ; définit la largeur de la calculatrice à 500px.
- Style de la boîte d'affichage
La bordure : 1px noir uni ; ajoute une bordure à la zone d'affichage. Le remplissage : 16px ; offre de l'espace à l'intérieur de la boîte pour une meilleure lisibilité. Le texte-align: right; garantit que le texte est aligné à droite. La taille de la police : 24px ; augmente la taille de la police pour une meilleure visibilité, tandis que border-radius : 5px ; arrondit les coins de la boîte.
- Conteneur de boutons et style des boutons
Ici, le conteneur de boutons est stylé avec .flex-container, où display: flex; crée une mise en page flexible pour ses éléments enfants. Le contenu-justifié : espace entre les deux ; La propriété répartit uniformément les boutons avec un espace entre eux, tandis que gap: 8px; assure un espacement approprié entre chaque bouton pour un meilleur alignement.
Chaque bouton est stylé avec flex: 1;, ce qui leur fait occuper le même espace dans une rangée. Remplissage : 16 px ; ajoute de l'espace à l'intérieur de chaque bouton pour plus de confort, et taille de police : 20 px ; garantit que le texte est lisible. Le poids de la police : gras ; fait ressortir le texte, tandis queborder: 1px solid black; ajoute une bordure autour de chaque bouton. De plus, border-radius : 8px ; arrondit légèrement les coins des boutons, et curseur : pointeur ; change le curseur en pointeur lorsqu'il est survolé. La couleur d'arrière-plan des boutons est définie sur blanc avec background-color : rgb(255, 255, 255);.
Pour le bouton "=", la classe .equal utilise flex: 2.5; pour lui donner plus d'espace, ce qui en fait 2,5 fois la largeur des autres boutons. Lorsque le bouton est survolé, le style bouton:hover change la couleur d'arrière-plan en gris, couleur d'arrière-plan:rgb(127, 131, 131); et la couleur du texte en blanc. Cet effet de transition est lissé par transition : couleur d'arrière-plan 0,3 s de facilité, couleur 0,3 s de facilité ;, ce qui permet un fondu de 0,3 seconde entre les couleurs.
Avec HTML et CSS ci-dessus, notre calculatrice ressemble à ceci :
Plongeons maintenant dans la partie principale, donner vie à notre calculatrice.
Extrait de code JavaScript
Décomposons le code pour une meilleure compréhension.
- Sélection des éléments DOM
La variable displayBox contient une référence à la zone d'affichage (
- Variables pour l'affichage et les opérateurs
La variable displayValue contient la valeur actuelle à afficher à l'écran, garantissant des mises à jour précises pendant les calculs. La variable lastOperator garde la trace du dernier opérateur utilisé, évitant ainsi les erreurs telles que les entrées consécutives de l'opérateur. De plus, console.log est utilisé à des fins de débogage, en particulier pour enregistrer la liste des nœuds calculatorBtns pour examen.
- Écouteur d'événement de clic de bouton/boucle sur chaque bouton
La méthode forEach est utilisée pour parcourir chaque bouton de la collection calculatorBtns. Pour chaque bouton, la propriété innerText est affectée à la variable buttonValue, qui contient le texte affiché sur le bouton, tel que "AC", "C", "9", " ", etc.
Un écouteur d'événement onclick est ensuite ajouté à chaque bouton. Lorsqu'un bouton est cliqué, la fonction attribuée est exécutée. Cette fonction, handleButtonAction(buttonValue), prend le texte du bouton (buttonValue) comme argument. En transmettant la valeur du bouton, la fonction permet à la calculatrice d'effectuer l'action correcte, comme effacer l'écran, saisir un nombre ou effectuer une opération mathématique.
- Gestion des touches enfoncées pour la saisie au clavier
Cela permet à la calculatrice de fonctionner également avec le clavier. Lorsqu'une touche est enfoncée, l'action du bouton correspondant est déclenchée. Par exemple, appuyer sur "1" sur le clavier déclenchera la fonction handleButtonAction() avec la valeur "1".
- Fonction d'affichage
La fonction display() met à jour le contenu de la zone d'affichage (displayBox) avec la displayValue actuelle. Si displayValue est vide, il affiche "0.0" par défaut.
- Gestionnaire d'action de bouton (logique principale) :
Le code effectue plusieurs étapes pour mettre à jour l'affichage de la calculatrice et gérer le calcul. Tout d’abord, eval(displayValue) évalue l’expression mathématique stockée dans displayValue. Par exemple, si l'écran affiche "3 5", eval calcule et renvoie le résultat, qui dans ce cas serait 8.
Ensuite, displayValue = String(result) convertit le résultat en chaîne et met à jour displayValue pour afficher le résultat à l'écran. Une fois le calcul terminé, lastOperator = "" réinitialise le lastOperator à une chaîne vide, garantissant que tout opérateur précédent est effacé. Enfin, la fonction display() met à jour l'affichage pour afficher le résultat du calcul.
- Logique des boutons AC (All Clear) et C (Clear)
Lorsque l'on clique sur le bouton "AC", le code vérifie si ButtonValue est égal à "AC". Si c'est vrai, cela réinitialise displayValue à une chaîne vide, effaçant ainsi tout l'affichage et réinitialisant la calculatrice. La fonction display() est ensuite appelée pour mettre à jour l'affichage avec la valeur vide.
Pour le bouton "C", si ButtonValue est "C", le code supprime le dernier caractère de displayValue en utilisant slice(0, -1). Cela permet à l'utilisateur de supprimer la dernière entrée ou le dernier caractère, et la fonction display() est à nouveau appelée pour mettre à jour l'affichage en conséquence.
- Validation des opérateurs
Cette condition est utilisée pour valider si un opérateur peut être enfoncé en fonction de la valeur actuelle affichée.
La condition ["%", "/", "*", " "].includes(buttonValue) vérifie si le bouton cliqué est l'un des opérateurs (%, /, *, ). Si le bouton est un opérateur, la vérification suivante if (!displayValue || displayValue === "-") garantit que l'opérateur ne peut pas être enfoncé si l'écran est vide ou ne contient qu'un signe moins (-). Cela évite les erreurs telles que le fait d'avoir deux opérateurs consécutifs ou de commencer par un opérateur. Si la condition est vraie, la fonction revient simplement et aucun opérateur n'est ajouté à l'affichage.
- Empêcher les opérateurs consécutifs
Ce bloc de code gère le scénario dans lequel des opérateurs consécutifs sont enfoncés, empêchant ainsi les entrées non valides telles que " " ou " -."
Tout d'abord, if (["%", "/", "*", " ", "-"].includes(buttonValue)) vérifie si le bouton cliqué est un opérateur. Ensuite, const lastCharacter = displayValue.slice(-1) récupère le dernier caractère de l'expression actuelle dans displayValue.
Ensuite, lastOperator = buttonValue met à jour la variable lastOperator pour stocker l'opérateur actuel. Si le dernier caractère est également un opérateur, comme vérifié par if (["%", "/", "*", " ", "-"].includes(lastCharacter)), le code le supprime à l'aide de displayValue.slice( 0, -1). Cela garantit qu'un seul opérateur apparaît à la fin de l'expression et empêche l'ajout d'opérateurs consécutifs.
- Validation des points décimaux
Ce bloc de code garantit qu'un point décimal (.) ne peut apparaître qu'une seule fois dans un nombre, empêchant ainsi les saisies non valides telles que "3..5."
Tout d'abord, la condition if (buttonValue === ".") vérifie si le bouton cliqué est un point décimal. Si tel est le cas, il procède à la validation.
Ensuite, const lastOperatorIndex = displayValue.lastIndexOf(lastOperator) trouve la position du dernier opérateur dans displayValue. Ensuite, const currentNumberSet = displayValue.slice(lastOperatorIndex) || displayValue extrait la partie de displayValue après le dernier opérateur, qui représente le nombre actuellement saisi. S'il n'y a pas d'opérateur, la totalité de displayValue est prise en compte.
Enfin, if (currentNumberSet.includes(".")) vérifie si la partie numérique extraite contient déjà un point décimal. Si c'est le cas, la fonction revient plus tôt, empêchant l'utilisateur de saisir un deuxième point décimal. Cela garantit que les nombres comme « 3,5 » sont valides, mais que les entrées comme « 3..5 » ne le sont pas.
- Mettre à jour l'affichage avec une nouvelle valeur :
Le code displayValue = displayValue buttonValue; ajoute la valeur du bouton enfoncé (comme un nombre ou un opérateur) à la chaîne displayValue existante. Cela crée l'expression ou le nombre actuel au fur et à mesure que l'utilisateur interagit avec la calculatrice.
Après avoir ajouté la valeur du bouton, la fonction display() est appelée pour mettre à jour l'affichage, en s'assurant qu'il reflète la displayValue mise à jour. Cela garantit que l'utilisateur voit la valeur ou l'expression la plus récente lorsqu'il la saisit.
Conclusion
Ce code JavaScript gère la logique d'affichage des valeurs, d'exécution de calculs, d'effacement des entrées et de validation des expressions dans une calculatrice. Il fonctionne à la fois avec les clics sur les boutons et la saisie au clavier. Les principales fonctionnalités incluent l'exécution de calculs lorsque les touches "=" ou "Entrée" sont enfoncées, la gestion des boutons AC (effacement général) et C (effacement du dernier caractère) et la prévention des opérations non valides telles que les opérateurs consécutifs ou plusieurs points décimaux. De plus, l'affichage est mis à jour après chaque action, garantissant que l'utilisateur voit la valeur ou l'expression la plus récente. Ensemble, ces fonctionnalités constituent la base d'une calculatrice fonctionnelle et interactive.
Vous trouverez ci-dessous mes liens de démonstration, alors n'hésitez pas à consulter le code complet, à cloner le référentiel ou à interagir avec la démo en direct. Bon codage !
GITHUB - [https://github.com/bigyan1997/calculator]
VERCEL - [https://calculator-delta-sepia-91.vercel.app/]
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript