Comment créer une calculatrice simple à l’aide de HTML, CSS et JavaScript

La meilleure façon d’apprendre JavaScript est de créer des projets. Si vous voulez devenir un bon développeur Web, vous devez commencer à créer des projets dès que possible. Vous pouvez commencer par créer des projets de niveau débutant comme une simple calculatrice, une horloge numérique ou un chronomètre.

Vous pouvez créer une calculatrice simple en utilisant uniquement les technologies Web de base : HTML, CSS et JavaScript. Cette calculatrice peut effectuer des opérations mathématiques de base comme l’addition, la soustraction, la multiplication et la division.

Caractéristiques de la calculatrice

Dans ce projet, vous allez développer une calculatrice qui aura les fonctionnalités suivantes :

Il effectuera des opérations arithmétiques de base comme l’addition, la soustraction, la division et la multiplication.
Il effectuera des opérations décimales.
La calculatrice affichera Infini si vous essayez de diviser un nombre par zéro.
Il n’affichera aucun résultat en cas d’expression invalide. Par exemple, 5++9 n’affichera rien.
Effacer la fonction d’écran pour effacer l’écran d’affichage à tout moment.

Le code utilisé dans ce projet est disponible dans un Référentiel GitHub et est libre d’utilisation sous la licence MIT. Si vous souhaitez jeter un œil à une version live de ce projet, vous pouvez consulter cette démo.

Composants de la calculatrice

Le calculateur comprend les composants suivants :

Opérateurs mathématiques: Addition (+), Soustraction (-), Multiplication

et division (/).Chiffres et bouton décimal

: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, . .Écran d’affichage

: Il affiche l’expression mathématique et le résultat.Bouton Effacer l’écran

: Il efface toutes les valeurs mathématiques.Bouton Calculer (=)

: Il évalue l'expression mathématique et renvoie le résultat.

Composants de base d’une calculatrice répartis entre l’affichage et les entrées clés.

Structure des dossiers du projet de calculatrice Créez un dossier racine contenant les fichiers HTML, CSS et JavaScript. Vous pouvez nommer les fichiers comme bon vous semble. Ici, le dossier racine est nomméCalculatrice . Selon la convention de dénomination standard, les fichiers HTML, CSS et JavaScript sont nommésindex.html ,styles.css et script.js

Structure des dossiers du projet de calculatrice

Code HTML Ouvrez le index.html

<!DOCTYPE html>
<html lang="en" dir="ltr"><head>
<meta charset="utf-8">
<title>Simple Calculator using HTML, CSS and JavaScript</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table class="calculator" >
<tr>
<td colspan="3"> <input class="display-box" type="text" id="result" disabled /> </td>
<!-- clearScreen() function clears all the values -->
<td> <input type="button" value="C" onclick="clearScreen()" id="btn" /> </td>
</tr>
<tr>
<!-- display() function displays the value of clicked button -->
<td> <input type="button" value="1" onclick="display('1')" /> </td>
<td> <input type="button" value="2" onclick="display('2')" /> </td>
<td> <input type="button" value="3" onclick="display('3')" /> </td>
<td> <input type="button" value="/" onclick="display('/')" /> </td>
</tr>
<tr>
<td> <input type="button" value="4" onclick="display('4')" /> </td>
<td> <input type="button" value="5" onclick="display('5')" /> </td>
<td> <input type="button" value="6" onclick="display('6')" /> </td>
<td> <input type="button" value="-" onclick="display('-')" /> </td>
</tr>
<tr>
<td> <input type="button" value="7" onclick="display('7')" /> </td>
<td> <input type="button" value="8" onclick="display('8')" /> </td>
<td> <input type="button" value="9" onclick="display('9')" /> </td>
<td> <input type="button" value="+" onclick="display('+')" /> </td>
</tr>
<tr>
<td> <input type="button" value="." onclick="display('.')" /> </td>
<td> <input type="button" value="0" onclick="display('0')" /> </td>
<!-- calculate() function evaluates the mathematical expression -->
<td> <input type="button" value="=" onclick="calculate()" id="btn" /> </td>
<td> <input type="button" value="*" onclick="display('*')" /> </td>
</tr>
</table>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

fichier et collez le code HTML suivant pour la calculatrice : Ce projet utilise un balise pour créer la structure globale de la calculatrice. La contient cinq lignes qui représentent cinq sections horizontales de la calculatrice. Chaque ligne a un correspondant

étiquette. Chaque la balise contient

balises qui contiennent l'écran d'affichage et les boutons de la calculatrice.

Lignes de la calculatrice

Code CSS Ouvrez le styles.css

@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
.calculator {
padding: 10px;
border-radius: 1em;
height: 380px;
width: 400px;
margin: auto;
background-color: 
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.display-box {
font-family: 'Orbitron', sans-serif;
background-color: 
border: solid black 0.5px;
color: black;
border-radius: 5px;
width: 100%;
height: 65%;
}
background-color: 
}
input[type=button] {
font-family: 'Orbitron', sans-serif;
background-color: 
color: white;
border: solid black 0.5px;
width: 100%;
border-radius: 5px;
height: 70%;
outline: none;
}
input:active[type=button] {
background: 
-webkit-box-shadow: inset 0px 0px 5px 
-moz-box-shadow: inset 0px 0px 5px 
box-shadow: inset 0px 0px 5px 
}

fichier et collez le code CSS suivant pour la calculatrice : Le CSS ci-dessus stylise la calculatrice. La .classer sélecteur en CSS sélectionne des éléments avec un attribut de classe spécifique. La .calculatrice et .display-box les sélecteurs de classe stylisent respectivement la structure du tableau et l’écran d’affichage de la calculatrice. @importer importe le Famille de polices Orbitron

à partir des polices Google.

Code Javascript Ouvrez le script.js


function clearScreen() {
document.getElementById("result").value = "";
}
function display(value) {
document.getElementById("result").value += value;
}

function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}

fichier et ajoutez des fonctionnalités à la calculatrice simple à l’aide du code JavaScript suivant :

Comprendre le code JavaScript Laécran propre() ,affichage() et calculer()

Les fonctions ajoutent des fonctionnalités à la calculatrice.

Effacement des valeurs La écran propre() fonction accéder au DOM à l’aide de la identifiant du résultat et effacez sa valeur en lui attribuant une chaîne vide. Tu peux utiliser les sélecteurs DOM

function clearScreen() {
document.getElementById("result").value = "";
}

pour cibler différents composants d’une page.

Affichage des valeurs La affichage() la fonction accède au DOM à l’aide de la identifiant

function display(value) {
document.getElementById("result").value += value;
}

du résultat et ajoute la valeur du bouton cliqué au résultat.

Évaluer l’expression La calculer() la fonction accède au DOM à l’aide de la identifiant du résultat et évalue l’expression à l’aide de la eval()

fonction. La valeur évaluée de l’expression est à nouveau affectée au résultat. Le Javascript eval()

function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}

fonction évalue une expression que vous lui transmettez. Il renvoie le résultat de cette expression.

Développez des projets de programmation sympas

Vous pouvez améliorer vos compétences en codage en développant des projets, que vous soyez débutant ou que vous reveniez au codage après un certain temps d’arrêt. La création d’applications entièrement fonctionnelles, même simples, peut renforcer votre confiance.

Vous pouvez essayer de nombreux projets simples allant des jeux (échecs, tic-tac-toe, Rock Paper Scissors) aux utilitaires simples (liste de tâches, conversion de poids, compte à rebours).

Mettez la main à la pâte avec ces projets et devenez un meilleur développeur.

— to www.makeuseof.com

Magazine Gadgets