Calculatrice Projet JavaScript est une excellente opportunité pour renforcer vos compétences en programmation. En construisant votre propre calculatrice, vous apprendrez non seulement les bases de JavaScript, mais aussi comment manipuler le Document Object Model (DOM) et rendre vos applications interactives et utiles. Plongeons dans ce projet étape par étape pour que vous puissiez suivre et créer votre propre calculatrice.
Introduction au Calculatrice Projet JavaScript
Le Calculatrice Projet JavaScript nous permet de mieux comprendre la manipulation du DOM, l’interaction utilisateur et la gestion des événements en JavaScript. Ce tutoriel vous guidera étape par étape pour créer une calculatrice fonctionnelle et esthétique. Vous pouvez également voir les bases du projet calculatrice en JavaScript pour plus de détails.
Structurer le Projet (HTML)
Commençons par créer le squelette de la calculatrice en HTML. Nous aurons un conteneur principal, un affichage et une série de boutons pour les chiffres et les opérations arithmétiques. Voici à quoi ressemblera notre code HTML :
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculatrice JavaScript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<div class="display">0</div>
<div class="buttons">
<button>7</button>
<button>8</button>
<button>9</button>
<button>/</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>*</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>-</button>
<button>0</button>
<button>.</button>
<button>C</button>
<button>+</button>
<button>=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Styliser la Calculatrice (CSS)
Pour rendre notre calculatrice plus attrayante, nous ajouterons un peu de CSS. Le fichier CSS formatte la disposition des boutons, l’écran de la calculatrice, et assure que tout est bien aligné. Si vous souhaitez approfondir vos connaissances sur les outils JavaScript, consultez notre article sur les meilleurs logiciels pour JavaScript.
/* style.css */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
}
.calculator {
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.display {
background: #333;
color: #fff;
font-size: 2em;
text-align: right;
padding: 20px;
box-sizing: border-box;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
button {
background: #fff;
border: 1px solid #ddd;
font-size: 1.5em;
padding: 20px;
cursor: pointer;
}
button:active {
background: #ddd;
}
Ajouter la Logique (JavaScript)
Maintenant que nous avons notre interface utilisateur, il est temps d’ajouter la logique avec JavaScript. Nous allons gérer les événements des boutons pour effectuer des calculs et mettre à jour l’affichage en conséquence. Vous pourriez trouver utile de lire notre guide sur l’utilisation du débogueur en JavaScript pour vous aider à repérer les erreurs.
// script.js
document.addEventListener('DOMContentLoaded', function() {
const buttons = document.querySelectorAll('.buttons button');
const display = document.querySelector('.display');
let currentInput = '0';
let firstOperand = null;
let operator = null;
let shouldResetDisplay = false;
buttons.forEach(button => {
button.addEventListener('click', () => {
const value = button.textContent;
if (value === 'C') {
resetCalculator();
return;
}
if (value === '=') {
evaluate();
return;
}
if (['/', '*', '-', '+'].includes(value)) {
handleOperator(value);
return;
}
handleNumber(value);
});
});
function resetCalculator() {
currentInput = '0';
firstOperand = null;
operator = null;
shouldResetDisplay = false;
updateDisplay();
}
function handleNumber(value) {
if (currentInput === '0' || shouldResetDisplay) {
currentInput = value;
shouldResetDisplay = false;
} else {
currentInput += value;
}
updateDisplay();
}
function handleOperator(value) {
if (operator !== null && !shouldResetDisplay) {
evaluate();
}
firstOperand = parseFloat(currentInput);
operator = value;
shouldResetDisplay = true;
}
function evaluate() {
if (operator === null || shouldResetDisplay) {
return;
}
const secondOperand = parseFloat(currentInput);
let result = 0;
switch (operator) {
case '/':
result = firstOperand / secondOperand;
break;
case '*':
result = firstOperand * secondOperand;
break;
case '-':
result = firstOperand - secondOperand;
break;
case '+':
result = firstOperand + secondOperand;
break;
}
currentInput = result.toString();
operator = null;
shouldResetDisplay = true;
updateDisplay();
}
function updateDisplay() {
display.textContent = currentInput;
}
});
Ajouter des Fonctionnalités Avancées
Pour rendre notre calculatrice encore plus puissante, ajoutons des fonctionnalités avancées telles que la gestion des décimales et des erreurs. Pour continuer à explorer des concepts avancés, consultez notre tutoriel sur la création d’objets en JavaScript.
// Ajout des fonctionnalités supplémentaires dans script.js
document.addEventListener('DOMContentLoaded', function() {
const buttons = document.querySelectorAll('.buttons button');
const display = document.querySelector('.display');
let currentInput = '0';
let firstOperand = null;
let operator = null;
let shouldResetDisplay = false;
buttons.forEach(button => {
button.addEventListener('click', () => {
const value = button.textContent;
if (value === 'C') {
resetCalculator();
return;
}
if (value === '=') {
evaluate();
return;
}
if (['/', '*', '-', '+'].includes(value)) {
handleOperator(value);
return;
}
if (value === '.') {
handleDecimal();
return;
}
handleNumber(value);
});
});
function resetCalculator() {
currentInput = '0';
firstOperand = null;
operator = null;
shouldResetDisplay = false;
updateDisplay();
}
function handleNumber(value) {
if (currentInput === '0' || shouldResetDisplay) {
currentInput = value;
shouldResetDisplay = false;
} else {
currentInput += value;
}
updateDisplay();
}
function handleOperator(value) {
if (operator !== null && !shouldResetDisplay) {
evaluate();
}
firstOperand = parseFloat(currentInput);
operator = value;
shouldResetDisplay = true;
}
function handleDecimal() {
if (shouldResetDisplay) {
currentInput = '0.';
shouldResetDisplay = false;
} else if (!currentInput.includes('.')) {
currentInput += '.';
}
updateDisplay();
}
function evaluate() {
if (operator === null || shouldResetDisplay) {
return;
}
const secondOperand = parseFloat(currentInput);
let result;
switch (operator) {
case '/':
if (secondOperand === 0) {
alert("Erreur : Division par zéro");
resetCalculator();
return;
}
result = firstOperand / secondOperand;
break;
case '*':
result = firstOperand * secondOperand;
break;
case '-':
result = firstOperand - secondOperand;
break;
case '+':
result = firstOperand + secondOperand;
break;
default:
return;
}
currentInput = result.toString();
operator = null;
shouldResetDisplay = true;
updateDisplay();
}
function updateDisplay() {
display.textContent = currentInput;
}
});
Continuez à améliorer votre projet en personnalisant le design, en ajoutant des fonctionnalités comme un historique de calculs, ou en rendant votre calculatrice réactive pour une utilisation sur mobiles. Vous pourriez aussi explorer les fonctions existantes en JavaScript pour enrichir vos compétences.
Conclusion
Créer une Calculatrice JavaScript est un excellent moyen de pratiquer vos compétences en programmation et d’approfondir votre compréhension de JavaScript. En suivant ce tutoriel, vous avez appris à structurer un projet, à manipuler le DOM et à gérer des événements. Continuez à explorer et étendre vos connaissances en JavaScript pour construire des projets encore plus ambitieux
