Projet JavaScript · R212 2025

Calculatrice

Calculatrice web développée en JavaScript vanilla pur — sans bibliothèque, sans framework. Gestion complète des opérations arithmétiques, interface responsive en CSS Grid, architecture orientée classe.

Tester la calculatrice

Live

15 × 4

HTML

CSS

01 — Contexte

Le projet

Projet R212 du BUT MMI — développer une calculatrice fonctionnelle en JavaScript vanilla, sans jQuery ni aucune bibliothèque externe. L'objectif : maîtriser la manipulation du DOM, la gestion des événements et la logique algorithmique en JS pur.

L'interface est construite avec CSS Grid pour reproduire fidèlement la grille d'une vraie calculatrice. Le layout s'adapte à toutes les tailles d'écran sans media queries.

1
JavaScript vanilla pur Aucune dépendance externe — logique métier entièrement codée à la main.
2
Architecture orientée classe Classe Calculator qui encapsule l'état et les méthodes de calcul.
3
CSS Grid Layout 4 colonnes fidèle à une vraie calculatrice — bouton 0 sur 2 colonnes.
4
Gestion des edge cases Division par zéro, nombres décimaux, opérations enchaînées.

02 — Stack technique

Les technologies

JavaScript

Logique complète — classe Calculator, gestion des événements, manipulation du DOM, calculs enchaînés.

Classes ES6 · addEventListener · querySelector · data-attributes

HTML5

Structure sémantique avec data-attributes pour identifier les boutons — séparation stricte HTML/JS.

data-number · data-operation · data-output · data-all-clear

CSS Grid

Layout en grille 4 colonnes — boutons span-two pour le 0 et AC. Responsive sans media queries.

grid-template-columns · span · gap · border-radius

03 — Apprentissages

Les défis techniques

Architecture

Classe Calculator orientée objet

Encapsuler toute la logique dans une classe — état courant, opérande précédent, opération en attente — sans variable globale.

Classe ES6 avec méthodes clear(), appendNumber(), chooseOperation(), compute().

Data attributes

Séparation HTML / JavaScript

Identifier les boutons sans ajouter de JS dans le HTML — utilisation des data-attributes pour typer chaque bouton.

querySelectorAll('[data-number]') — sélection propre sans classes ni IDs.

Edge cases

Gestion des cas limites

Division par zéro, double virgule, opérations enchaînées, résultat affiché comme opérande.

Conditions de garde à chaque étape — includes('.'), isNaN(), parseFloat().

CSS Grid

Layout fidèle à une vraie calculatrice

Reproduire la grille d'une calculatrice avec le bouton 0 sur 2 colonnes et AC sur 2 colonnes également.

grid-column: span 2 — solution CSS pure, aucun hack.

Calculatrice

Le projet

Les technologies

Les défis techniques

Calculatricevanilla JS

Calculatrice
vanilla JS