cerchez07/complete-intro-to-web-dev-v3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add some of the logic

Browse Source
This commit is contained in:
Marius Cerchez
2026-03-28 11:01:04 +02:00
parent 82bd8786cc
commit d4a2866358
3 changed files with 97 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
calculator/index.html
+13 -14
View File
@@ -3,8 +3,6 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link <link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"
rel="stylesheet" rel="stylesheet"
@@ -17,26 +15,27 @@
<input type="text" id="display" disabled /> <input type="text" id="display" disabled />
<button class="clear">C</button> <button class="clear">C</button>
<button>←</button> <button class="backspace">←</button>
<button class="operator">÷</button> <button class="operator">÷</button>
<button>7</button> <button class="number">7</button>
<button>8</button> <button class="number">8</button>
<button>9</button> <button class="number">9</button>
<button class="operator">×</button> <button class="operator">×</button>
<button>4</button> <button class="number">4</button>
<button>5</button> <button class="number">5</button>
<button>6</button> <button class="number">6</button>
<button class="operator">-</button> <button class="operator">-</button>
<button>1</button> <button class="number">1</button>
<button>2</button> <button class="number">2</button>
<button>3</button> <button class="number">3</button>
<button class="operator">+</button> <button class="operator">+</button>
<button class="zero">0</button> <button class="large number">0</button>
<button class="operator">=</button> <button class="result">=</button>
</div> </div>
<script src="./script.js"></script>
</body> </body>
</html> </html>
calculator/script.js
+83
View File
@@ -0,0 +1,83 @@
const display = document.querySelector("#display");
let previousNumber = 0;
let lastOperation = "";
function doOperation(operation, numA, numB) {
numA = Number(numA);
numB = Number(numB);
switch (operation) {
case "+":
return numA + numB;
break;
}
}
//Set numbers logic
const numbers = document.querySelectorAll(".number");
numbers.forEach((number) => {
number.addEventListener("click", (event) => {
updateDisplay(event.target.innerText);
});
});
function updateDisplay(number) {
let currentResult = display.value;
if (currentResult === "0") {
display.value = number;
} else {
display.value += number;
}
}
function reset() {
display.value = "0";
previousNumber = "0";
lastOperation = "";
}
// Set clear button
const clearButton = document.querySelector(".clear");
clearButton.addEventListener("click", () => {
reset();
});
// Set backspace button
backspaceButton = document.querySelector(".backspace");
backspaceButton.addEventListener("click", () => {
let result = display.value;
result = result.slice(0, -1);
if (result.length === 0) {
result = "0";
}
display.value = result;
});
// Operations
const operators = document.querySelectorAll(".operator");
operators.forEach((operator) => {
operator.addEventListener("click", (event) => {
if (lastOperation) {
previousNumber = doOperation(
lastOperation,
previousNumber,
display.value,
);
} else {
previousNumber = Number(display.value);
}
display.value = "0";
lastOperation = event.target.innerText;
});
});
// Result button
const resultButton = document.querySelector(".result");
resultButton.addEventListener("click", (event) => {
if (lastOperation) {
display.value = doOperation(lastOperation, previousNumber, display.value);
}
});
reset();
calculator/style.css
+1 -1
View File
@@ -52,7 +52,7 @@ button:hover {
grid-column: 1 / 3; grid-column: 1 / 3;
} }
.zero { .large {
grid-column: 1 / 4; grid-column: 1 / 4;
} }