CalculatriceJS

# 🧮 Calculatrice Autonome en JavaScript (Vanilla JS & Tailwind CSS)

Un composant de calculatrice moderne, modulaire et entièrement autonome développé en **JavaScript pur** (ES6 Classes) et stylisé avec **Tailwind CSS**. Conçu pour être facilement intégré dans n'importe quelle page web via une simple balise `<script>`.

---

## 🚀 Fonctionnalités

- **Architecture Composant (POO)** : Encapsulé dans une classe JavaScript réutilisable (`SimpleCalculator`).
- **Interface Fluide & Stable** : Double affichage dynamique (historique de l'opération en haut et saisie en cours en bas) pour éviter les sauts visuels lors du choix des opérateurs.
- **Opérations de base** : Addition, soustraction, multiplication, division (avec gestion des erreurs de division par zéro).
- **Fonctions d'édition** : Touche de réinitialisation complète (`AC`) et suppression chiffre par chiffre (`⌫`).
- **Design Moderne** : Style épuré inspiré des interfaces sombres modernes, entièrement responsive grâce à Tailwind CSS.

---

## 📂 Structure du Projet

```text
calculatriceJS/
├── calculatrice.js    # Code source de la classe de la calculatrice
├── index.html         # Page de test et d'intégration
└── README.md          # Documentation du projet
```

🛠️ Installation et Utilisation

Créer ou placer les fichiers dans votre répertoire de projet.
Inclure Tailwind CSS et votre script dans votre fichier HTML :

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculatrice</title>
    <!-- Chargement de Tailwind CSS -->
    <script src="[https://cdn.tailwindcss.com](https://cdn.tailwindcss.com)"></script>
  </head>
  <body
    class="bg-slate-900 text-slate-100 flex items-center justify-center min-h-screen"
  >
    <!-- 1. Créer un conteneur avec un ID unique -->
    <div id="maCalculatrice"></div>

    <!-- 2. Charger le script du composant -->
    <script src="./calculatrice.js"></script>

    <!-- 3. Initialiser l'instance -->
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        new SimpleCalculator("maCalculatrice");
      });
    </script>
  </body>
</html>

📌 Commandes Git Utiles

Pour sauvegarder vos modifications et les envoyer sur votre dépôt distant (sur la branche main) :

# Vérifier l'état des fichiers
git status

# Ajouter les modifications
git add .

# Valider avec un message
git commit -m "Mise à jour de la calculatrice autonome"

# Envoyer sur la branche principale
git push origin main

📄 Licence

Ce projet est libre d'utilisation et de modification pour vos projets personnels ou professionnels.