05-calculatrice.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculatrice Interactive</title>
    <script>
        function calculer() {
            // Récupération des valeurs des champs
            const nombre1 = parseFloat(document.getElementById('nombre1').value);
            const nombre2 = parseFloat(document.getElementById('nombre2').value);
            const operation = document.getElementById('operation').value;
            const resultatElement = document.getElementById('resultat');

            // Vérification des entrées
            if (isNaN(nombre1) || isNaN(nombre2)) {
                resultatElement.textContent = 'Veuillez entrer des nombres valides.';
                return;
            }

            if (operation === '/' && nombre2 === 0) {
                resultatElement.textContent = 'Erreur : Division par zéro.';
                return;
            }

            // Calcul
            let resultat;
            switch (operation) {
                case '+':
                    resultat = nombre1 + nombre2;
                    break;
                case '-':
                    resultat = nombre1 - nombre2;
                    break;
                case '*':
                    resultat = nombre1 * nombre2;
                    break;
                case '/':
                    resultat = nombre1 / nombre2;
                    break;
                default:
                    resultatElement.textContent = 'Opération inconnue.';
                    return;
            }

            // Affichage du résultat
            resultatElement.textContent = `Résultat : ${resultat}`;
        }
    </script>
</head>
<body>
    <h1>Calculatrice Interactive</h1>
    <form onsubmit="event.preventDefault(); calculer();">
        <label for="nombre1">Nombre 1 : </label>
        <input type="text" id="nombre1" name="nombre1"><br>

        <label for="nombre2">Nombre 2 : </label>
        <input type="text" id="nombre2" name="nombre2"><br>

        <label for="operation">Opération : </label>
        <select id="operation" name="operation">
            <option value="+">Addition (+)</option>
            <option value="-">Soustraction (-)</option>
            <option value="*">Multiplication (*)</option>
            <option value="/">Division (/)</option>
        </select><br>

        <button type="submit">Calculer</button>
    </form>
    <p id="resultat"></p>
</body>
</html>