On est de retour pour un tuto sur la création d’une calculatrice web. Je sais, c’est pas courant, vous direz, une calculatrice web. Mais cela peut être bien utile pour renforcer vos compétences en HTML, CSS, et JavaScript, tout en pratiquant la logique de programmation de manière ludique !
Dans ce projet, on va créer une calculatrice responsive et élégante qui fonctionnera directement dans le navigateur. Ce projet est parfait pour les débutants comme pour les développeurs souhaitant réviser les bases de l’interaction utilisateur et de la manipulation des DOM. Que ce soit pour apprendre ou pour intégrer un petit outil pratique à un site web, vous verrez que créer une calculatrice web est aussi instructif qu’amusant !
Alors, sortez votre éditeur de code, et c’est parti pour notre projet de calculatrice !
Cette calculatrice est responsive et centrée. Les boutons sont colorés pour indiquer leurs fonctions et changent de taille selon l’écran.
Exceptionnellement, dans ce tuto je mettrai l’ensemble du code Html, Js et Css dans le même fichier. Je sais, pas du tout recommandé. Il s’agit d’un projet assez léger donc on peut bien se le permettre.
Voici le code:
<!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>- HTML Structure :
- Le conteneur
.calculatorcontient l’affichage de la calculatrice (inputavecid="display") et les boutons pour les chiffres, les opérateurs, et les actions (effacer, supprimer). - Les boutons sont disposés en grille à l’aide de Bootstrap et des classes de grille (
col-3pour une largeur de 25 % dans une ligne de 4 colonnes).
- Le conteneur
- CSS Styles :
- Centrage et Responsivité : Le conteneur de la calculatrice est centré avec
display: flexetalign-items: center. - Personnalisation des Boutons :
.function: Pour les boutons d’opération comme+,-,x,/, avec une couleur jaune..equal: Pour le bouton=en vert..clear: Pour le boutonCen rouge.
- Centrage et Responsivité : Le conteneur de la calculatrice est centré avec
- JavaScript Fonctionnalité :
appendNumber(): Ajoute un nombre à l’affichage.appendOperator(): Ajoute un opérateur à l’affichage, entouré d’espaces pour séparer les termes.clearDisplay(): Efface tout l’affichage.calculate(): Calcule et affiche le résultat de l’expression.eval()est utilisé ici pour exécuter l’expression, mais veillez à bien valider vos entrées si vous intégrez ce code dans une application réelle pour éviter des risques de sécurité.backspace(): Supprime le dernier caractère de l’affichage.
Résultat
Chouette hein vous direz ! J’espère que vous aller bien aimer.
Bon code !
Vous pouvez télécharger le projet sur notre dépôt GitHub
