Calculatrice Base JavaScript – La création d’une calculatrice en JavaScript est un excellent moyen de pratiquer vos compétences en programmation. Dans cet article, nous allons examiner les bases de la construction d’une calculatrice en abordant la mise en place de l’interface utilisateur, les fonctions JavaScript essentielles et le traitement des événements. Suivez ce tutoriel et vous aurez une calculatrice fonctionnelle d’ici la fin !
Introduction au Projet Calculatrice en JavaScript
Dans ce projet, nous allons utiliser HTML, CSS et JavaScript pour créer une calculatrice simple mais fonctionnelle. En suivant les étapes de ce tutoriel, vous apprendrez à manipuler le DOM, gérer les événements utilisateur et écrire des fonctions JavaScript. Commençons par la mise en place des éléments de base.
Mise en Place de l’Interface Utilisateur
Pour commencer, nous allons créer la structure HTML de notre calculatrice. Créez un fichier nommé index.html et ajoutez le code suivant :
<!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>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calculator">
<div class="display" id="display">0</div>
<div class="buttons">
<button class="btn" id="clear">C</button>
<button class="btn" id="equals">=</button>
<button class="btn" id="plus">+</button>
...
<!-- Ajoutez le reste des boutons ici -->
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Styling avec CSS
Pour donner un bon aspect visuel à notre calculatrice, nous utiliserons CSS. Créez un fichier nommé styles.css et ajoutez le code suivant :
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f4f4f4;
}
.calculator {
width: 400px;
height: auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
background-color: white;
}
.display {
font-size: 2em;
padding: 10px;
background-color: #222;
color: white;
text-align: right;
border-radius: 5px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-top: 10px;
}
.btn {
padding: 20px;
font-size: 1.5em;
border: none;
border-radius: 5px;
cursor: pointer;
background-color: #f4f4f4;
transition: background-color 0.2s;
}
.btn:hover {
background-color: #ddd;
}
Ajouter des Fonctionnalités avec JavaScript
Maintenant que notre interface utilisateur est prête, ajoutons les fonctionnalités nécessaires avec JavaScript. Créez un fichier nommé script.js et commencez par sélectionner les éléments HTML :
document.addEventListener('DOMContentLoaded', function() {
const display = document.getElementById('display');
const buttons = Array.from(document.getElementsByClassName('btn'));
let currentInput = '';
let operator = null;
let previousInput = '';
buttons.map(button => {
button.addEventListener('click', (e) => {
const value = e.target.innerText;
if (value === 'C') {
display.innerText = '0';
currentInput = '';
operator = null;
previousInput = '';
} else if (value === '=') {
display.innerText = eval(previousInput + operator + currentInput);
currentInput = '';
operator = null;
previousInput = display.innerText;
} else if (['+', '-', '*', '/'].includes(value)) {
operator = value;
previousInput = currentInput;
currentInput = '';
} else {
currentInput += value;
display.innerText = currentInput;
}
});
});
});
Tester la Calculatrice
Il est maintenant temps de tester votre calculatrice ! Ouvrez index.html dans votre navigateur et vérifiez que toutes les opérations de base fonctionnent correctement. Vous pouvez étendre ce projet en ajoutant des fonctionnalités supplémentaires comme la gestion des décimales, l’ajout d’un bouton de suppression, ou même un thème sombre.
Exemples Avancés et Améliorations
Pour rendre la calculatrice plus robuste et fonctionnelle, vous pouvez implémenter des fonctions et améliorations supplémentaires :
Gestion des Erreurs
Ajoutez une gestion des erreurs pour des entrées incorrectes ou des divisions par zéro :
document.addEventListener('DOMContentLoaded', function() {
const display = document.getElementById('display');
const buttons = Array.from(document.getElementsByClassName('btn'));
let currentInput = '';
let operator = null;
let previousInput = '';
buttons.map(button => {
button.addEventListener('click', (e) => {
const value = e.target.innerText;
try {
if (value === 'C') {
display.innerText = '0';
currentInput = '';
operator = null;
previousInput = '';
} else if (value === '=') {
display.innerText = eval(previousInput + operator + currentInput);
currentInput = '';
operator = null;
previousInput = display.innerText;
} else if (['+', '-', '*', '/'].includes(value)) {
operator = value;
previousInput = currentInput;
currentInput = '';
} else {
currentInput += value;
display.innerText = currentInput;
}
} catch (error) {
display.innerText = 'Erreur';
currentInput = '';
operator = null;
previousInput = '';
}
});
});
});
Ajout de Fonctionnalités Supplémentaires
Vous pouvez également ajouter des fonctionnalités comme les calculs en chaîne, les pourcentages ou encore un bouton de changement de signe (+/-). Voici un exemple de code pour ajouter un bouton de pourcentage :
document.addEventListener('DOMContentLoaded', function() {
const display = document.getElementById('display');
const buttons = Array.from(document.getElementsByClassName('btn'));
let currentInput = '';
let operator = null;
let previousInput = '';
buttons.map(button => {
button.addEventListener('click', (e) => {
const value = e.target.innerText;
try {
if (value === 'C') {
display.innerText = '0';
currentInput = '';
operator = null;
previousInput = '';
} else if (value === '=') {
display.innerText = eval(previousInput + operator + currentInput);
currentInput = '';
operator = null;
previousInput = display.innerText;
} else if (value === '%') {
currentInput = (parseFloat(currentInput) / 100).toString();
display.innerText = currentInput;
} else if (['+', '-', '*', '/'].includes(value)) {
operator = value;
previousInput = currentInput;
currentInput = '';
} else {
currentInput += value;
display.innerText = currentInput;
}
} catch (error) {
display.innerText = 'Erreur';
currentInput = '';
operator = null;
previousInput = '';
}
});
});
});
En intégrant ces fonctionnalités et en ajoutant des éléments personnalisés, votre calculatrice JavaScript sera plus performante et user-friendly. Explorez davantage ce projet sur Github ou d’autres ressources en ligne pour perfectionner vos compétences. Apprenez également comment accéder aux éléments du DOM en JavaScript pour d’autres projets.
Conclusion
Créer une calculatrice en JavaScript est une excellente initiation aux bases de la programmation en JavaScript. Ce projet vous permet de travailler sur la manipulation du DOM, la gestion des événements, et l’écriture de fonctions JavaScript. Pour aller plus loin, consultez nos autres tutoriels sur les projets JavaScript avancés et continuez à pratiquer pour devenir un développeur chevronné. Pour plus de tutoriels sur JavaScript, explorez notre cours sur les fondamentaux de JavaScript.
Pour aller plus loin dans l’apprentissage du JavaScript, visitez aussi : Qu’est-ce que JavaScript : Explications et Définition, Les Meilleurs Outils pour
