Posted on by

Tp javascript : Dom

Travail Pratique : Calculatrice Simple en JavaScript

Question : Créez une calculatrice simple utilisant HTML, CSS, et JavaScript. La calculatrice doit permettre d’effectuer des opérations de base, telles que l’addition, la soustraction, la multiplication et la division.

Explication :

  1. Structure HTML :
  • Utilisez des boutons pour les chiffres, les opérations et un champ de texte pour afficher les résultats.
  • Chaque bouton aura une fonction associée pour traiter les événements de clic.
  1. Style CSS :
  • Ajoutez du style pour rendre la calculatrice visuellement attrayante.
  • Assurez-vous que les boutons et le champ de texte sont bien disposés.
  1. JavaScript :
  • Créez des fonctions pour ajouter des chiffres et des opérations au champ de texte.
  • Implémentez une fonction pour effectuer le calcul lorsque le bouton égal est cliqué.
  • Assurez-vous de gérer les erreurs, comme la division par zéro, et affichez le résultat dans le champ de texte.

Code :

HTML :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Calculatrice</title>
</head>
<body>
    <div class="calculator">
        <input type="text" id="display" readonly>
        <br>
        <button onclick="appendToDisplay('1')">1</button>
        <!-- Ajoutez des boutons pour les chiffres, les opérations, etc. -->
        <br>
        <button onclick="calculate()">=</button>
        <!-- Ajoutez le bouton égal pour effectuer le calcul -->
        <br>
        <button onclick="clearDisplay()">C</button>
        <!-- Ajoutez le bouton pour effacer l'affichage -->
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS (style.css) :

.calculator {
    width: 300px;
    margin: 50px auto;
    text-align: center;
}

button {
    width: 50px;
    height: 50px;
    font-size: 20px;
}

JavaScript (script.js) :

function appendToDisplay(value) {
    document.getElementById('display').value += value;
}

function calculate() {
    try {
        document.getElementById('display').value = eval(document.getElementById('display').value);
    } catch (error) {
        document.getElementById('display').value = 'Error';
    }
}

function clearDisplay() {
    document.getElementById('display').value = '';
}

Note : Cette calculatrice est basique et utilise la fonction eval(), ce qui peut présenter des risques de sécurité. Dans un environnement réel, une approche plus sécurisée serait nécessaire.

Published by Fadili