Créer une calculatrice simple en HTML et JavaScript (Débutant)

Astuces & tutoriels Blog Html/css JavaScript Html, Javascript, Tutoriel Henry Fiti 26 décembre 2025 0 Commentaires

Créer une calculatrice simple en HTML et JavaScript (Débutant)

Créer une calculatrice est un excellent exercice pour débuter en programmation web.
Dans ce tutoriel, nous allons apprendre à créer une calculatrice basique capable de faire :

➕ Addition
➖ Soustraction
✖️ Multiplication
➗ Division

Le tout avec HTML pour la structure et JavaScript pour la logique.

Prérequis

Notions de base en HTML
Notions de base en JavaScript
Un navigateur web (Chrome, Firefox, etc.)

Structure HTML de la calculatrice

Voici le code HTML de base :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Calculatrice Débutant</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f2f2f2;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .calculatrice {
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            width: 250px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }

        input {
            width: 100%;
            height: 40px;
            font-size: 18px;
            margin-bottom: 10px;
            text-align: right;
        }

        button {
            width: 23%;
            height: 40px;
            font-size: 16px;
            margin: 1%;
            cursor: pointer;
        }
    </style>
</head>
<body>

<div class="calculatrice">
    <input type="text" id="resultat" disabled>

    <button onclick="ajouter('7')">7</button>
    <button onclick="ajouter('8')">8</button>
    <button onclick="ajouter('9')">9</button>
    <button onclick="ajouter('/')">÷</button>

    <button onclick="ajouter('4')">4</button>
    <button onclick="ajouter('5')">5</button>
    <button onclick="ajouter('6')">6</button>
    <button onclick="ajouter('*')">×</button>

    <button onclick="ajouter('1')">1</button>
    <button onclick="ajouter('2')">2</button>
    <button onclick="ajouter('3')">3</button>
    <button onclick="ajouter('-')">−</button>

    <button onclick="ajouter('0')">0</button>
    <button onclick="effacer()">C</button>
    <button onclick="calculer()">=</button>
    <button onclick="ajouter('+')">+</button>
</div>

Le code JavaScript

Ajoute ce script avant la fermeture de la balise </body> :

<script>
    function ajouter(valeur) {
        document.getElementById("resultat").value += valeur;
    }

    function calculer() {
        try {
            let resultat = eval(document.getElementById("resultat").value);
            document.getElementById("resultat").value = resultat;
        } catch (e) {
            alert("Erreur de calcul");
        }
    }

    function effacer() {
        document.getElementById("resultat").value = "";
    }
</script>