Apprenez à créer une calculatrice basique avec JavaScript. Ce guide étape par étape est parfait pour les développeurs débutants souhaitant améliorer leurs compétences en front-end.

Créer une Calculatrice Basique avec JavaScript

|

Écrit par

Hugo – La Pause Code

Introduction

Créer une calculatrice basique avec JavaScript est un excellent projet pour les développeurs débutants souhaitant améliorer leurs compétences en front-end. Ce tutoriel vous guidera à travers les étapes nécessaires pour construire une calculatrice simple, tout en vous familiarisant avec les concepts fondamentaux de JavaScript.

Étape 1 : Configuration de l’environnement

Avant de commencer, assurez-vous d’avoir un éditeur de code installé, comme Visual Studio Code ou Sublime Text. Créez un nouveau fichier HTML, par exemple calculatrice.html, et ouvrez-le dans votre éditeur.

Étape 2 : Structure HTML de la calculatrice

Commencez par créer la structure de base de votre calculatrice en HTML. Voici un exemple de code :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculatrice Basique</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="calculatrice">
        <input type="text" id="result" disabled>
        <div class="buttons">
            <button onclick="appendToResult('1')">1</button>
            <button onclick="appendToResult('2')">2</button>
            <button onclick="appendToResult('3')">3</button>
            <button onclick="appendToResult('+')">+</button>
            <button onclick="appendToResult('4')">4</button>
            <button onclick="appendToResult('5')">5</button>
            <button onclick="appendToResult('6')">6</button>
            <button onclick="appendToResult('-')">-</button>
            <button onclick="appendToResult('7')">7</button>
            <button onclick="appendToResult('8')">8</button>
            <button onclick="appendToResult('9')">9</button>
            <button onclick="appendToResult('*')">*</button>
            <button onclick="calculateResult()">=</button>
            <button onclick="clearResult()">C</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Étape 3 : Ajouter le CSS

Pour rendre votre calculatrice attrayante, ajoutez un peu de CSS. Créez un fichier style.css et ajoutez le code suivant :

.calculatrice {
    width: 200px;
    margin: 50px auto;
    text-align: center;
}

input {
    width: 100%;
    height: 40px;
    font-size: 20px;
}

button {
    width: 25%;
    height: 40px;
    font-size: 20px;
}

Étape 4 : Écrire le JavaScript

Enfin, créez un fichier script.js pour gérer la logique de la calculatrice. Voici un exemple de code :

function appendToResult(value) {
    document.getElementById('result').value += value;
}

function calculateResult() {
    const result = eval(document.getElementById('result').value);
    document.getElementById('result').value = result;
}

function clearResult() {
    document.getElementById('result').value = '';
}

Conclusion

Vous avez maintenant une calculatrice basique fonctionnelle grâce à JavaScript ! Ce projet vous a permis d’apprendre les bases de la manipulation du DOM, de l’interaction avec l’utilisateur et de l’utilisation de JavaScript pour effectuer des calculs. N’hésitez pas à personnaliser votre calculatrice en ajoutant des fonctionnalités supplémentaires, comme des opérations avancées ou un design amélioré.

Laisser un commentaire