2.8 KiB
2.8 KiB
# 🧮 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.