diff --git a/demos/calculator-app/app.js b/demos/calculator-app/app.js new file mode 100644 index 000000000..1fce73256 --- /dev/null +++ b/demos/calculator-app/app.js @@ -0,0 +1,44 @@ +const display = document.getElementById("display"); +const buttons = document.querySelectorAll("button"); + +buttons.forEach(button => { + button.addEventListener("click", () => handleInput(button.innerText)); +}); + +function handleInput(value) { + if (value === "C") { + display.value = ""; + } else if (value === "⌫") { + display.value = display.value.slice(0, -1); + } else if (value === "=") { + calculate(); + } else { + display.value += value; + } +} + +function calculate() { + try { + const result = display.value + .replace(/×/g, "*") + .replace(/÷/g, "/") + .replace(/−/g, "-"); + + display.value = eval(result); + } catch { + display.value = "Error"; + } +} + +/* Keyboard Support */ +document.addEventListener("keydown", (e) => { + if ((e.key >= 0 && e.key <= 9) || "+-*/.".includes(e.key)) { + display.value += e.key; + } else if (e.key === "Enter") { + calculate(); + } else if (e.key === "Backspace") { + display.value = display.value.slice(0, -1); + } else if (e.key === "Escape") { + display.value = ""; + } +}); diff --git a/demos/calculator-app/index.html b/demos/calculator-app/index.html new file mode 100644 index 000000000..3cae93f64 --- /dev/null +++ b/demos/calculator-app/index.html @@ -0,0 +1,41 @@ + + + + + Calculator UI App + + + + +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + diff --git a/demos/calculator-app/style.css b/demos/calculator-app/style.css new file mode 100644 index 000000000..62d18ca6a --- /dev/null +++ b/demos/calculator-app/style.css @@ -0,0 +1,76 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Verdana, Tahoma, sans-serif; +} + +body { + height: 100vh; + background: linear-gradient(135deg, #764ba2, #667eea); + display: flex; + justify-content: center; + align-items: center; +} + +.calculator { + width: 320px; + background: #222; + border-radius: 10px; + padding: 15px; +} + +#display { + width: 100%; + height: 60px; + background: #000; + color: #0f0; + font-size: 2rem; + text-align: right; + padding: 10px; + border: none; + margin-bottom: 10px; +} + +.buttons { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; +} + +button { + padding: 15px; + font-size: 1.2rem; + border: none; + border-radius: 5px; + cursor: pointer; +} + +button:hover { + opacity: 0.8; +} + +.operator { + background: #ff9f43; +} + +.equal { + background: #1dd1a1; + grid-row: span 2; +} + +.clear { + background: #ee5253; +} + +.delete { + background: #576574; +} + +.zero { + grid-column: span 2; +} + +button:not(.operator):not(.equal):not(.clear):not(.delete) { + background: #c8d6e5; +}