diff --git a/index.html b/index.html index 935c09e..77502e9 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@
-
 
+
@@ -28,10 +28,10 @@
- +
@@ -43,4 +43,5 @@ - \ No newline at end of file + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..ba15d66 --- /dev/null +++ b/script.js @@ -0,0 +1,95 @@ +const display = document.querySelector('.display'); +const numberButtons = document.querySelectorAll('.number'); +const clearButton = document.querySelector('#clear'); + +const addOp = document.getElementById('add'); +const subtractOp = document.getElementById('subtract'); +const divideOp = document.getElementById('divide'); +const multiplyOp = document.getElementById('multiply'); +const equalButton = document.getElementById('equal'); + +numberButtons.forEach((button) => { + const value = button.innerText; + button.addEventListener('click', () => { + if (display.innerText === '') { + display.innerText = value; + } else { + display.innerText += value; + } + }); +}); + +clearButton.addEventListener('click', () => { + display.innerText = ''; +}); + +addOp.addEventListener('click', () => { + display.innerText += '+'; +}); + +subtractOp.addEventListener('click', () => { + display.innerText += '-'; +}); + +divideOp.addEventListener('click', () => { + display.innerText += '/'; +}); + +multiplyOp.addEventListener('click', () => { + display.innerText += '*'; +}); + +equalButton.addEventListener('click', () => { + const expression = display.innerText; + try { + const result = calc(expression); + display.innerText = result; + } catch (e) { + display.innerText = ''; + } +}); + +function calc(expression) { + const operators = ['+', '-', '*', '/']; + let op = null; + let opIndex = -1; + + for (const candidate of operators) { + const idx = expression.indexOf(candidate); + if (idx > 0) { + op = candidate; + opIndex = idx; + break; + } + } + + if (op === null || opIndex === -1 || opIndex === expression.length - 1) { + throw new Error('Invalid expression'); + } + + const left = expression.slice(0, opIndex); + const right = expression.slice(opIndex + 1); + + const a = Number(left); + const b = Number(right); + + if (Number.isNaN(a) || Number.isNaN(b)) { + throw new Error('Invalid number'); + } + + switch (op) { + case '+': + return a + b; + case '-': + return a - b; + case '*': + return a * b; + case '/': + if (b === 0) { + throw new Error('Division by zero'); + } + return a / b; + default: + throw new Error('Unknown operator'); + } +} diff --git a/style.css b/style.css index e8aee0c..8aa0b5a 100644 --- a/style.css +++ b/style.css @@ -8,6 +8,8 @@ --display-bg: #1f2937; --display-color: #ffffff; --text-color: #111827; + --success-bg: #10b981; + --danger-bg: #ef4444; } * { @@ -40,13 +42,12 @@ body { background-color: var(--display-bg); color: var(--display-color); font-size: 2.5rem; - padding: 20px; + padding: 40px; border-radius: 10px; - text-align: right; + text-align: left; margin-bottom: 10px; overflow-x: auto; } - .buttons { display: flex; flex-direction: column; @@ -81,7 +82,6 @@ button:active { transform: translateY(0); } -/* Operations Row Styling */ .operations button { background-color: var(--op-bg); color: var(--op-color); @@ -92,14 +92,13 @@ button:active { filter: brightness(110%); } -/* Last Row Styling */ .last-row button { - background-color: #10b981; /* Green for equals/action */ - color: white; + background-color: var(--success-bg); + color: var(--op-color); } .last-row button:first-child { - background-color: #ef4444; /* Red for Clear */ + background-color: var(--danger-bg); } .last-row button:nth-child(2) {