calculatrice js V2.0

2026-08-21 15:49:37 +02:00
parent d8cb626014
commit 455fffb933
5 changed files with 334 additions and 24 deletions
@@ -0,0 +1,93 @@
+````markdown
+# 🧮 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
+
+1. **Créer ou placer les fichiers** dans votre répertoire de projet.
+2. **Inclure Tailwind CSS** et votre script dans votre fichier HTML :
+
+```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`) :
+
+```bash
+# 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.
+
+```
+
+```