Dans ce tutoriel, tu vas créer une calculatrice en JavaScript, avec HTML, CSS et Bootstrap, qui fonctionne directement dans le navigateur. Un mini-projet idéal pour pratiquer la manipulation du DOM, les événements et la logique de programmation, tout en obtenant un résultat propre et responsive.
Ce que tu vas construire : une calculatrice en JavaScript complète
Une calculatrice en JavaScript est l’un des meilleurs exercices pour débuter : le résultat est concret, et chaque bouton t’oblige à réfléchir à la logique derrière l’interface. À la fin, tu auras un outil fonctionnel que tu peux intégrer à ton portfolio ou à un site.
Prérequis
- Les bases de HTML et de CSS
- Des notions de JavaScript : fonctions, variables et
document.getElementById() - Un éditeur de code comme Visual Studio Code et un navigateur récent
- Aucune installation : Bootstrap est chargé via son CDN
Commence par créer une carte de profil moderne en HTML et CSS : tu y verras toutes les bases utilisées ici.
Étape 1 : préparer le fichier unique
Exceptionnellement, toute ta calculatrice en JavaScript tient dans un seul fichier index.html : le HTML, le CSS dans une balise <style> et le JavaScript dans une balise <script>. Le projet est léger, c’est donc plus simple à copier et à tester.
Sur un projet plus gros, sépare toujours ton code en trois fichiers (index.html, style.css, script.js). C’est plus lisible et plus facile à maintenir.
Étape 2 : le code complet de la calculatrice
Voici le code complet. Crée un fichier index.html, colle ce code, puis ouvre-le dans ton navigateur :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculatrice</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Styles pour centrer et redimensionner la calculatrice */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f2f5;
}
.calculator {
width: 100%;
max-width: 320px;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.calculator-display {
width: 100%;
height: 60px;
background-color: #333;
color: #fff;
text-align: right;
padding: 15px;
border-radius: 5px;
font-size: 24px;
margin-bottom: 10px;
}
.button {
width: 100%;
height: 60px;
font-size: 24px;
border-radius: 5px;
}
/* Styles pour les boutons spécifiques */
.button.function {
background-color: #f7c744;
color: #fff;
}
.button.equal {
background-color: #28a745;
color: #fff;
}
.button.clear {
background-color: #dc3545;
color: #fff;
}
</style>
</head>
<body>
<div class="calculator">
<!-- Affichage de la calculatrice -->
<input type="text" id="display" class="calculator-display" disabled />
<!-- Boutons de la calculatrice -->
<div class="row g-2">
<div class="col-3"><button class="button clear" onclick="clearDisplay()">C</button></div>
<div class="col-3"><button class="button function" onclick="appendOperator('%')">%</button></div>
<div class="col-3"><button class="button function" onclick="appendOperator('/')">/</button></div>
<div class="col-3"><button class="button function" onclick="backspace()">←</button></div>
<div class="col-3"><button class="button" onclick="appendNumber('7')">7</button></div>
<div class="col-3"><button class="button" onclick="appendNumber('8')">8</button></div>
<div class="col-3"><button class="button" onclick="appendNumber('9')">9</button></div>
<div class="col-3"><button class="button function" onclick="appendOperator('*')">x</button></div>
<div class="col-3"><button class="button" onclick="appendNumber('4')">4</button></div>
<div class="col-3"><button class="button" onclick="appendNumber('5')">5</button></div>
<div class="col-3"><button class="button" onclick="appendNumber('6')">6</button></div>
<div class="col-3"><button class="button function" onclick="appendOperator('-')">-</button></div>
<div class="col-3"><button class="button" onclick="appendNumber('1')">1</button></div>
<div class="col-3"><button class="button" onclick="appendNumber('2')">2</button></div>
<div class="col-3"><button class="button" onclick="appendNumber('3')">3</button></div>
<div class="col-3"><button class="button function" onclick="appendOperator('+')">+</button></div>
<div class="col-6"><button class="button" onclick="appendNumber('0')">0</button></div>
<div class="col-3"><button class="button" onclick="appendNumber('.')">.</button></div>
<div class="col-3"><button class="button equal" onclick="calculate()">=</button></div>
</div>
</div>
<script>
// Fonction pour afficher un nombre
function appendNumber(number) {
document.getElementById('display').value += number;
}
// Fonction pour afficher un opérateur
function appendOperator(operator) {
document.getElementById('display').value += ' ' + operator + ' ';
}
// Fonction pour effacer l'affichage
function clearDisplay() {
document.getElementById('display').value = '';
}
// Fonction pour calculer le résultat
function calculate() {
try {
let expression = document.getElementById('display').value.replace(/x/g, '*');
document.getElementById('display').value = eval(expression);
} catch {
document.getElementById('display').value = 'Erreur';
}
}
// Fonction pour effacer le dernier caractère
function backspace() {
let display = document.getElementById('display');
display.value = display.value.slice(0, -1);
}
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Étape 3 : comprendre la structure HTML et le style CSS
La structure HTML
- Le conteneur
.calculatorregroupe l’écran et tous les boutons - L’écran est un
<input>avec l’identifiantdisplay: c’est lui que le JavaScript met à jour - Les boutons sont placés dans la grille Bootstrap avec la classe
col-3, soit 4 boutons par ligne (25 % chacun) - Chaque bouton appelle une fonction JavaScript grâce à l’attribut
onclick
Le style CSS
- Centrage : la calculatrice est centrée à l’écran avec
display: flexetalign-items: center - .function : les opérateurs (+, −, ×, ÷, %) en jaune
- .equal : le bouton « = » en vert
- .clear : le bouton « C » en rouge
Étape 4 : comprendre la logique JavaScript
Toute la logique de ta calculatrice en JavaScript tient en cinq petites fonctions :
slice(0, -1).La fonction calculate() utilise eval(), qui exécute n’importe quel code JavaScript. C’est acceptable pour un exercice local, mais pas pour une application en ligne. Tu verras plus bas comment la sécuriser.
Étape 5 : tester ta calculatrice en JavaScript
- Ouvre
index.htmldans ton navigateur - Teste chaque opération :
12 + 8,9 * 3,50 / 4… - Vérifie les cas limites : deux opérateurs à la suite, division par zéro, expression vide
- Réduis la fenêtre ou active le mode responsive des outils de développement pour tester l’affichage mobile
Aller plus loin
Sécuriser le calcul
Pour rendre ta calculatrice en JavaScript plus sûre, vérifie que l’expression ne contient que des caractères autorisés avant de la calculer. Remplace la fonction calculate() par celle-ci :
function calculate() {
const display = document.getElementById('display');
const expression = display.value.replace(/x/g, '*');
// N'autorise que les chiffres, les opérateurs, les points et les espaces
if (!/^[0-9+\-*/%. ]+$/.test(expression)) {
display.value = 'Erreur';
return;
}
try {
display.value = Function('"use strict"; return (' + expression + ')')();
} catch {
display.value = 'Erreur';
}
}Ajouter le support du clavier
Pour taper les calculs au clavier, ajoute cet écouteur d’événement à la fin de ton script :
document.addEventListener('keydown', (event) => {
const key = event.key;
if (/^[0-9.]$/.test(key)) appendNumber(key);
else if (['+', '-', '*', '/', '%'].includes(key)) appendOperator(key);
else if (key === 'Enter') calculate();
else if (key === 'Backspace') backspace();
else if (key === 'Escape') clearDisplay();
});D’autres idées pour continuer :
- Ajouter un historique des derniers calculs sous l’écran
- Proposer un mode sombre avec des variables CSS
- Refaire le même projet en Python avec une interface graphique : créer une calculatrice Python graphique avec Tkinter
- Continuer à pratiquer JavaScript avec la Quiz App en HTML, CSS et JavaScript ou l’application de gestion de tâches
FAQ : questions fréquentes
Pourquoi ma calculatrice en JavaScript affiche « Erreur » ?
Le message apparaît quand l’expression saisie n’est pas valide, par exemple deux opérateurs à la suite (« 5 + * 3 »). La fonction calculate() intercepte l’erreur avec try…catch et affiche « Erreur » au lieu de bloquer la page.
Est-ce dangereux d’utiliser eval() ?
Sur une calculatrice locale, le risque est faible, mais eval() exécute n’importe quel code JavaScript. Dès que le projet est en ligne, filtre l’expression avant de la calculer, comme dans la section « Aller plus loin ».
Faut-il absolument Bootstrap ?
Non. Bootstrap sert ici à placer les boutons en grille rapidement. Tu peux obtenir le même résultat en CSS pur avec display: grid et grid-template-columns: repeat(4, 1fr).
Pourquoi tout mettre dans un seul fichier ?
Pour un petit projet d’apprentissage, c’est plus simple à copier et à tester. Sur un vrai projet, sépare le HTML, le CSS et le JavaScript dans trois fichiers pour un code plus lisible et plus facile à maintenir.
Bravo, tu as maintenant une calculatrice en JavaScript fonctionnelle et responsive ! Si tu as une question ou une idée d’amélioration, laisse un commentaire ci-dessous.
