calculatrice js V1.0
This commit is contained in:
+146
@@ -0,0 +1,146 @@
|
|||||||
|
class SimpleCalculator {
|
||||||
|
constructor(containerId) {
|
||||||
|
this.container = document.getElementById(containerId);
|
||||||
|
if (!this.container) return;
|
||||||
|
this.currentInput = "0";
|
||||||
|
this.previousInput = "";
|
||||||
|
this.operation = null;
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
this.container.innerHTML = `
|
||||||
|
<div class="w-72 bg-slate-800 p-4 rounded-2xl shadow-xl select-none text-slate-100">
|
||||||
|
<!-- Écran avec une hauteur fixe (min-h) pour éviter qu'il ne rétrécisse -->
|
||||||
|
<div id="calc-screen" class="bg-slate-900 text-right p-4 rounded-xl mb-4 text-2xl font-mono tracking-wider overflow-hidden min-h-[4rem] flex flex-col justify-center">
|
||||||
|
<div id="calc-prev" class="text-xs text-slate-400 h-4"></div>
|
||||||
|
<div id="calc-current">0</div>
|
||||||
|
</div>
|
||||||
|
<!-- Clavier -->
|
||||||
|
<div class="grid grid-cols-4 gap-2">
|
||||||
|
<button data-action="clear" class="col-span-2 bg-red-600 hover:bg-red-500 p-3 rounded-xl font-bold transition">AC</button>
|
||||||
|
<button data-action="delete" class="bg-slate-700 hover:bg-slate-600 p-3 rounded-xl font-bold transition">⌫</button>
|
||||||
|
<button data-action="operator" data-value="/" class="bg-amber-600 hover:bg-amber-500 p-3 rounded-xl font-bold transition">÷</button>
|
||||||
|
|
||||||
|
<button data-action="number" data-value="7" class="bg-slate-700 hover:bg-slate-600 p-3 rounded-xl font-bold transition">7</button>
|
||||||
|
<button data-action="number" data-value="8" class="bg-slate-700 hover:bg-slate-600 p-3 rounded-xl font-bold transition">8</button>
|
||||||
|
<button data-action="number" data-value="9" class="bg-slate-700 hover:bg-slate-600 p-3 rounded-xl font-bold transition">9</button>
|
||||||
|
<button data-action="operator" data-value="*" class="bg-amber-600 hover:bg-amber-500 p-3 rounded-xl font-bold transition">×</button>
|
||||||
|
|
||||||
|
<button data-action="number" data-value="4" class="bg-slate-700 hover:bg-slate-600 p-3 rounded-xl font-bold transition">4</button>
|
||||||
|
<button data-action="number" data-value="5" class="bg-slate-700 hover:bg-slate-600 p-3 rounded-xl font-bold transition">5</button>
|
||||||
|
<button data-action="number" data-value="6" class="bg-slate-700 hover:bg-slate-600 p-3 rounded-xl font-bold transition">6</button>
|
||||||
|
<button data-action="operator" data-value="-" class="bg-amber-600 hover:bg-amber-500 p-3 rounded-xl font-bold transition">-</button>
|
||||||
|
|
||||||
|
<button data-action="number" data-value="1" class="bg-slate-700 hover:bg-slate-600 p-3 rounded-xl font-bold transition">1</button>
|
||||||
|
<button data-action="number" data-value="2" class="bg-slate-700 hover:bg-slate-600 p-3 rounded-xl font-bold transition">2</button>
|
||||||
|
<button data-action="number" data-value="3" class="bg-slate-700 hover:bg-slate-600 p-3 rounded-xl font-bold transition">3</button>
|
||||||
|
<button data-action="operator" data-value="+" class="bg-amber-600 hover:bg-amber-500 p-3 rounded-xl font-bold transition">+</button>
|
||||||
|
|
||||||
|
<button data-action="number" data-value="0" class="col-span-2 bg-slate-700 hover:bg-slate-600 p-3 rounded-xl font-bold transition">0</button>
|
||||||
|
<button data-action="number" data-value="." class="bg-slate-700 hover:bg-slate-600 p-3 rounded-xl font-bold transition">.</button>
|
||||||
|
<button data-action="calculate" class="bg-emerald-600 hover:bg-emerald-500 p-3 rounded-xl font-bold transition">=</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
this.prevScreen = this.container.querySelector("#calc-prev");
|
||||||
|
this.currentScreen = this.container.querySelector("#calc-current");
|
||||||
|
this.addListeners();
|
||||||
|
}
|
||||||
|
|
||||||
|
addListeners() {
|
||||||
|
this.container.addEventListener("click", (e) => {
|
||||||
|
const button = e.target.closest("button");
|
||||||
|
if (!button) return;
|
||||||
|
|
||||||
|
const action = button.getAttribute("data-action");
|
||||||
|
const value = button.getAttribute("data-value");
|
||||||
|
|
||||||
|
if (action === "number") {
|
||||||
|
this.appendNumber(value);
|
||||||
|
} else if (action === "operator") {
|
||||||
|
this.chooseOperation(value);
|
||||||
|
} else if (action === "calculate") {
|
||||||
|
this.compute();
|
||||||
|
} else if (action === "clear") {
|
||||||
|
this.clear();
|
||||||
|
} else if (action === "delete") {
|
||||||
|
this.deleteDigit();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.updateScreen();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
appendNumber(number) {
|
||||||
|
if (number === "." && this.currentInput.includes(".")) return;
|
||||||
|
if (this.currentInput === "0" && number !== ".") {
|
||||||
|
this.currentInput = number;
|
||||||
|
} else {
|
||||||
|
this.currentInput += number;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
chooseOperation(op) {
|
||||||
|
if (this.currentInput === "") return;
|
||||||
|
if (this.previousInput !== "") {
|
||||||
|
this.compute();
|
||||||
|
}
|
||||||
|
this.operation = op;
|
||||||
|
this.previousInput = this.currentInput;
|
||||||
|
this.currentInput = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
compute() {
|
||||||
|
let computation;
|
||||||
|
const prev = parseFloat(this.previousInput);
|
||||||
|
const current = parseFloat(this.currentInput);
|
||||||
|
if (isNaN(prev) || isNaN(current)) return;
|
||||||
|
|
||||||
|
switch (this.operation) {
|
||||||
|
case "+":
|
||||||
|
computation = prev + current;
|
||||||
|
break;
|
||||||
|
case "-":
|
||||||
|
computation = prev - current;
|
||||||
|
break;
|
||||||
|
case "*":
|
||||||
|
computation = prev * current;
|
||||||
|
break;
|
||||||
|
case "/":
|
||||||
|
computation = current === 0 ? "Erreur" : prev / current;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.currentInput = computation.toString();
|
||||||
|
this.operation = null;
|
||||||
|
this.previousInput = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
clear() {
|
||||||
|
this.currentInput = "0";
|
||||||
|
this.previousInput = "";
|
||||||
|
this.operation = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
deleteDigit() {
|
||||||
|
if (this.currentInput.length === 1) {
|
||||||
|
this.currentInput = "0";
|
||||||
|
} else {
|
||||||
|
this.currentInput = this.currentInput.slice(0, -1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateScreen() {
|
||||||
|
this.currentScreen.innerText =
|
||||||
|
this.currentInput === "" ? "0" : this.currentInput;
|
||||||
|
if (this.operation != null) {
|
||||||
|
this.prevScreen.innerText = `${this.previousInput} ${this.operation}`;
|
||||||
|
} else {
|
||||||
|
this.prevScreen.innerText = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
+26
@@ -0,0 +1,26 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Calculatrice Autonome</title>
|
||||||
|
<!-- Tailwind CSS requis pour le style -->
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
</head>
|
||||||
|
<body
|
||||||
|
class="bg-slate-900 text-slate-100 p-10 flex flex-col items-center justify-center min-h-screen"
|
||||||
|
>
|
||||||
|
<!-- Conteneur de la calculatrice -->
|
||||||
|
<div id="maCalculatrice"></div>
|
||||||
|
|
||||||
|
<!-- Chargement du script -->
|
||||||
|
<script src="./calculatrice.js"></script>
|
||||||
|
|
||||||
|
<!-- Initialisation -->
|
||||||
|
<script>
|
||||||
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
new SimpleCalculator("maCalculatrice");
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user