94 lines
2.8 KiB
Markdown
94 lines
2.8 KiB
Markdown
````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.
|
|
|
|
```
|
|
|
|
```
|