6.3 Calculatrice JavaScript – Une calculatrice est un outil essentiel que vous pouvez créer pour mettre en pratique vos compétences en JavaScript. Dans ce tutoriel, nous allons apprendre à créer une simple calculatrice étape par étape. Cette première étape se concentrera sur la mise en place du mode de calcul, permettant aux utilisateurs d’effectuer des opérations basiques comme l’addition, la soustraction, la multiplication et la division.
Introduction à la Calculatrice Mode JavaScript
Créer une calculatrice en JavaScript est un projet parfait pour pratiquer les bases de la programmation en JavaScript. Nous allons d’abord aborder la structure générale de notre calculatrice et mettre en place la logique de calcul. Avant de plonger dans le code, jetons un coup d’œil à ce que nous allons construire.
Étape 1: Définir la Structure HTML de la Calculatrice
Pour démarrer, nous devons construire l’interface utilisateur de notre calculatrice. Nous utiliserons un simple fichier HTML pour créer les boutons et l’écran de la calculatrice :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculatrice JavaScript</title>
</head>
<body>
<div class="calculator">
<input type="text" class="calculator-screen" disabled>
<div class="calculator-keys">
<button type="button" class="operator" value="+">+</button>
<button type="button" class="operator" value="-">-</button>
<button type="button" class="operator" value="*">*</button>
<button type="button" class="operator" value="/">/</button>
<button type="button" value="7">7</button>
<button type="button" value="8">8</button>
<button type="button" value="9">9</button>
<button type="button" value="4">4</button>
<button type="button" value="5">5</button>
<button type="button" value="6">6</button>
<button type="button" value="1">1</button>
<button type="button" value="2">2</button>
<button type="button" value="3">3</button>
<button type="button" value="0">0</button>
<button type="button" class="decimal" value=".">.</button>
<button type="button" class="all-clear" value="all-clear">AC</button>
<button type="button" class="equal-sign" value="=">=</button>
</div>
</div>
</body>
</html>
Étape 2: Styles CSS pour l’Apparence
Pour rendre notre calculatrice plus belle et fonctionnelle, ajoutons un peu de CSS :
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
.calculator {
border: 1px solid #333;
border-radius: 10px;
width: 300px;
padding: 10px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}
.calculator-screen {
width: 100%;
height: 50px;
font-size: 2em;
text-align: right;
border: none;
margin-bottom: 10px;
padding: 5px;
box-sizing: border-box;
}
.calculator-keys button {
width: 25%;
height: 60px;
font-size: 1.5em;
margin: 3px;
cursor: pointer;
}
.operator {
background-color: #f2a33c;
}
.equal-sign {
background-color: #4caf50;
color: #fff;
}
.all-clear {
background-color: #e74c3c;
color: #fff;
}
Étape 3: Ajout du Mode de Calcul en JavaScript
Maintenant que nous avons l’interface utilisateur prête, nous allons ajouter la logique de calcul en JavaScript. Commençons par capturer les événements des boutons et mettre en place les fonctions de base :
document.addEventListener('DOMContentLoaded', function() {
const calculator = document.querySelector('.calculator');
const keys = calculator.querySelector('.calculator-keys');
const display = calculator.querySelector('.calculator-screen');
keys.addEventListener('click', event => {
if (!event.target.matches('button')) return;
const key = event.target;
const action = key.value;
const displayedNum = display.value;
const previousKeyType = calculator.dataset.previousKeyType;
if (key.classList.contains('operator')) {
calculator.dataset.firstValue = displayedNum;
calculator.dataset.operator = action;
calculator.dataset.previousKeyType = 'operator';
}
if (key.classList.contains('decimal')) {
if (!displayedNum.includes('.')) {
display.value += '.';
}
}
if (key.classList.contains('all-clear')) {
display.value = '';
}
if (key.classList.contains('equal-sign')) {
const firstValue = calculator.dataset.firstValue;
const operator = calculator.dataset.operator;
const secondValue = displayedNum;
display.value = calculate(firstValue, operator, secondValue);
}
if (!key.classList.contains('operator') && !key.classList.contains('decimal') && !key.classList.contains('all-clear') && !key.classList.contains('equal-sign')) {
if (previousKeyType === 'operator') {
display.value = key.value;
} else {
display.value += key.value;
}
}
calculator.dataset.previousKeyType = action;
});
function calculate(first, operator, second) {
first = parseFloat(first);
second = parseFloat(second);
if (operator === '+') return first + second;
if (operator === '-') return first - second;
if (operator === '*') return first * second;
if (operator === '/') return first / second;
}
});
Étape 4: Amélioration de l’Expérience Utilisateur
Pour finaliser notre calculatrice, nous allons ajouter quelques améliorations pour une meilleure expérience utilisateur comme la gestion des nombres décimaux et la réinitialisation des valeurs:
document.addEventListener('DOMContentLoaded', function() {
const calculator = document.querySelector('.calculator');
const keys = calculator.querySelector('.calculator-keys');
const display = calculator.querySelector('.calculator-screen');
keys.addEventListener('click', event => {
if (!event.target.matches('button')) return;
const key = event.target;
const action = key.value;
const displayedNum = display.value;
const previousKeyType = calculator.dataset.previousKeyType;
if (key.classList.contains('operator')) {
calculator.dataset.firstValue = displayedNum;
calculator.dataset.operator = action;
calculator.dataset.previousKeyType = 'operator';
}
if (key.classList.contains('decimal')) {
if (!displayedNum.includes('.')) {
display.value += '.';
} else if (previousKeyType === 'operator') {
display.value = '0.';
}
}
if (key.classList.contains('all-clear')) {
display.value = '';
calculator.dataset.firstValue = '';
calculator.dataset.modValue = '';
calculator.dataset.operator = '';
calculator.dataset.previousKeyType = '';
}
if (key.classList.contains('equal-sign')) {
const firstValue = calculator.dataset.firstValue;
const operator = calculator.dataset.operator;
const secondValue = displayedNum;
display.value = calculate(firstValue, operator, secondValue);
}
if (!key.classList.contains('operator') && !key.classList.contains('decimal') && !key.classList.contains('all-clear') && !key.classList.contains('equal-sign')) {
if (previousKeyType === 'operator') {
display.value = key.value;
} else if (previousKeyType === 'equal-sign') {
display.value = key.value;
} else {
display.value += key.value;
}
}
calculator.dataset.previousKeyType = action;
});
function calculate(first, operator, second) {
const firstNum = parseFloat(first);
const secondNum = parseFloat(second);
if (operator === '+') return firstNum + secondNum;
if (operator === '-') return firstNum - secondNum;
if (operator === '*') return firstNum * secondNum;
if (operator === '/') return firstNum / secondNum;
}
});
Conclusion de notre Projet Calculatrice JavaScript
Nous avons créé une calculatrice basique en JavaScript, HTML, et CSS. Ce projet couvre les bases de la programmation JavaScript, la manipulation du DOM, et quelques aspects de la gestion des événements. Pour approfondir, vous pouvez explorer d’autres concepts tels que les fonctions JavaScript et même apprendre à ajouter des paramètres aux fonctions. Une autre bonne idée serait d’apprendre comment afficher des tableaux en JavaScript et d’utiliser des conditions en JavaScript pour gérer des scénarios plus complexes.
