From 0a612616fedfce4490216e1022923cd29ccd8dcb Mon Sep 17 00:00:00 2001 From: liaddj Date: Fri, 28 Nov 2025 13:24:22 +0200 Subject: [PATCH] Add my files --- .vscode/settings.json | 3 + index.html | 69 ++++++++++++----------- script.js | 77 ++++++++++++++++++++++++++ style.css | 126 ++++++++++++++---------------------------- 4 files changed, 154 insertions(+), 121 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 script.js diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.html b/index.html index 935c09e..a860a76 100644 --- a/index.html +++ b/index.html @@ -2,45 +2,44 @@ - - - Calculator - + + Calculator + -
-
 
-
-
- - - -
-
- - - -
-
- - - -
-
- -
-
- - - -
+
+ +

Liad Pro Calculator

+
+ +
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
-
- + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..8aebf95 --- /dev/null +++ b/script.js @@ -0,0 +1,77 @@ +let firstNum = ''; +let secondNum = ''; +let operator = null; +let display = document.querySelector('.display'); + +let numbers = document.querySelectorAll('.number'); + +let plus = document.querySelector('#add'); +let sub = document.querySelector('#subtract'); +let mul = document.querySelector('#multiply'); +let div = document.querySelector('#divide'); + +let equal = document.querySelector('#equal'); +let clear_page = document.querySelector('#clear') + + +numbers.forEach(number => { + number.addEventListener('click', function(event) { + const value = event.target.textContent; + + if (!operator) { + firstNum += value; + display.textContent = firstNum; + } else { + secondNum += value; + display.textContent = secondNum; + } + }); +}); + +plus.addEventListener('click', function() { + operator = '+'; + display.textContent = operator; +}); + +div.addEventListener('click', function() { + operator = '/'; + display.textContent = operator; +}); + +sub.addEventListener('click', function() { + operator = '-'; + display.textContent = operator; +}); + +mul.addEventListener('click', function() { + operator = '*'; + display.textContent = operator; +}); + +equal.addEventListener('click', function() { + let result; + if (operator === '+') { + result = Number(firstNum) + Number(secondNum); + } + if(operator === '-') { + result = Number(firstNum) - Number(secondNum); + } + if(operator === '/') { + result = Number(firstNum) / Number(secondNum); + } + if(operator === '*') { + result = Number(firstNum) * Number(secondNum); + } + display.textContent = result; + + firstNum = result.toString(); + secondNum = ''; + operator = null; +}); + +clear_page.addEventListener('click', function(){ +firstNum = ''; +secondNum = ''; +operator = null; +display.textContent = ''; +}) diff --git a/style.css b/style.css index e8aee0c..4ca205b 100644 --- a/style.css +++ b/style.css @@ -1,108 +1,62 @@ -:root { - --bg-color: #f3f4f6; - --calc-bg: #ffffff; - --btn-bg: #e5e7eb; - --btn-hover: #d1d5db; - --op-bg: #3b82f6; - --op-color: #ffffff; - --display-bg: #1f2937; - --display-color: #ffffff; - --text-color: #111827; +body { + position: relative; } -* { - box-sizing: border-box; - margin: 0; - padding: 0; - font-family: 'Inter', system-ui, -apple-system, sans-serif; +.calc-title { + text-align: center; + font-size: 2.1rem; + font-weight: 700; + margin-top: 30px; + margin-bottom: 25px; + color: #333; + padding-bottom: 8px; + border-bottom: 3px solid #ffbf69; + width: 100%; } -body { - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; - background-color: var(--bg-color); -} -.calculator { - background-color: var(--calc-bg); - padding: 20px; - border-radius: 20px; - box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); - width: 320px; - display: flex; - flex-direction: column; - gap: 15px; +.container { + position: fixed; + top: 50%; + left: 50%; + translate: -50% -50%; } .display { - background-color: var(--display-bg); - color: var(--display-color); - font-size: 2.5rem; - padding: 20px; - border-radius: 10px; - text-align: right; + width: 300px; + height: 60px; + border: 0.5px solid black; + border-radius: 5px; margin-bottom: 10px; - overflow-x: auto; -} - -.buttons { - display: flex; - flex-direction: column; - gap: 10px; -} - -.row { - display: flex; - gap: 10px; - justify-content: space-between; + text-align: right; + font-size: 24px; + padding: 5px; + background-color: rgb(255, 249, 242); } button { - flex: 1; - padding: 15px; - font-size: 1.25rem; - border: none; - border-radius: 10px; - background-color: var(--btn-bg); - color: var(--text-color); + width: 70px; + height: 70px; + margin: 3px; + font-size: 20px; + border-radius: 5px; + border: 0.5px solid black; cursor: pointer; - transition: all 0.2s ease; - font-weight: 500; -} - -button:hover { - background-color: var(--btn-hover); - transform: translateY(-2px); } -button:active { - transform: translateY(0); -} -/* Operations Row Styling */ -.operations button { - background-color: var(--op-bg); - color: var(--op-color); - font-weight: bold; +.container button:nth-of-type(odd) { + background-color: blanchedalmond; } -.operations button:hover { - filter: brightness(110%); +.container button:nth-of-type(even) { + background-color: rgb(255, 247, 228); } -/* Last Row Styling */ -.last-row button { - background-color: #10b981; /* Green for equals/action */ - color: white; +.container button:nth-of-type(odd):hover { + background-color: rgb(255, 220, 167); } -.last-row button:first-child { - background-color: #ef4444; /* Red for Clear */ -} - -.last-row button:nth-child(2) { - background-color: var(--btn-bg); - color: var(--text-color); -} +.container button:nth-of-type(even):hover { + background-color: rgb(252, 235, 196); +} \ No newline at end of file