From 22a96a6b13769bc6cb8c0a04c5ca4e9976e7dac6 Mon Sep 17 00:00:00 2001 From: Moriel Date: Thu, 27 Nov 2025 20:29:35 +0200 Subject: [PATCH 1/2] js --- index.html | 6 ++--- script.js | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 11 ++++----- 3 files changed, 72 insertions(+), 10 deletions(-) create mode 100644 script.js diff --git a/index.html b/index.html index 935c09e..7c350b3 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@
-
 
+
@@ -28,10 +28,10 @@
- +
diff --git a/script.js b/script.js new file mode 100644 index 0000000..c01f027 --- /dev/null +++ b/script.js @@ -0,0 +1,65 @@ +const display = document.querySelector('.display'); +const numberButtons = document.querySelectorAll('.number'); +const clearButton= document.querySelector('#clear'); + +const add_op= document.getElementById('add'); +const subtract_op=document.getElementById('subtract'); +const divide_op=document.getElementById('divide'); +const multiply_op=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= ''; + }); + +add_op.addEventListener('click',()=>{ + + display.innerText+='+'; +}); + +subtract_op.addEventListener('click',()=> +{ + display.innerText+='-'; + +}); +divide_op.addEventListener('click',()=> +{ + display.innerText+='/'; +}); +multiply_op.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) +{ + return Function(`"use strict"; return (${expression})`)(); +} + diff --git a/style.css b/style.css index e8aee0c..22eb192 100644 --- a/style.css +++ b/style.css @@ -40,13 +40,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 +80,6 @@ button:active { transform: translateY(0); } -/* Operations Row Styling */ .operations button { background-color: var(--op-bg); color: var(--op-color); @@ -92,14 +90,13 @@ button:active { filter: brightness(110%); } -/* Last Row Styling */ .last-row button { - background-color: #10b981; /* Green for equals/action */ + background-color: #10b981; color: white; } .last-row button:first-child { - background-color: #ef4444; /* Red for Clear */ + background-color: #ef4444; } .last-row button:nth-child(2) { From e9a392b159b1e2d5214fcf95071969d2afefd94d Mon Sep 17 00:00:00 2001 From: Moriel Date: Thu, 4 Dec 2025 00:06:45 +0200 Subject: [PATCH 2/2] Fix review comments from PR --- index.html | 3 +- script.js | 126 +++++++++++++++++++++++++++++++++-------------------- style.css | 8 ++-- 3 files changed, 85 insertions(+), 52 deletions(-) diff --git a/index.html b/index.html index 7c350b3..77502e9 100644 --- a/index.html +++ b/index.html @@ -43,4 +43,5 @@ - \ No newline at end of file + + diff --git a/script.js b/script.js index c01f027..ba15d66 100644 --- a/script.js +++ b/script.js @@ -1,65 +1,95 @@ const display = document.querySelector('.display'); const numberButtons = document.querySelectorAll('.number'); -const clearButton= document.querySelector('#clear'); +const clearButton = document.querySelector('#clear'); -const add_op= document.getElementById('add'); -const subtract_op=document.getElementById('subtract'); -const divide_op=document.getElementById('divide'); -const multiply_op=document.getElementById('multiply'); +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; - } - }); - +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= ''; - }); +clearButton.addEventListener('click', () => { + display.innerText = ''; +}); -add_op.addEventListener('click',()=>{ - - display.innerText+='+'; +addOp.addEventListener('click', () => { + display.innerText += '+'; }); -subtract_op.addEventListener('click',()=> -{ - display.innerText+='-'; +subtractOp.addEventListener('click', () => { + display.innerText += '-'; +}); +divideOp.addEventListener('click', () => { + display.innerText += '/'; }); -divide_op.addEventListener('click',()=> -{ - display.innerText+='/'; + +multiplyOp.addEventListener('click', () => { + display.innerText += '*'; }); -multiply_op.addEventListener('click',()=>{ - display.innerText+='*'; + +equalButton.addEventListener('click', () => { + const expression = display.innerText; + try { + const result = calc(expression); + display.innerText = result; + } catch (e) { + 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; } -}) -function calc(expression) -{ - return Function(`"use strict"; return (${expression})`)(); -} + } + + 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 22eb192..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; } * { @@ -91,12 +93,12 @@ button:active { } .last-row button { - background-color: #10b981; - color: white; + background-color: var(--success-bg); + color: var(--op-color); } .last-row button:first-child { - background-color: #ef4444; + background-color: var(--danger-bg); } .last-row button:nth-child(2) {