mirror of
https://github.com/yusufipk/another-calculator.git
synced 2026-09-12 03:26:11 +00:00
finished project
This commit is contained in:
Yusuf İpek
+221
@@ -0,0 +1,221 @@
|
||||
// Theme
|
||||
const theme1 = document.getElementById("theme1");
|
||||
const theme2 = document.getElementById("theme2");
|
||||
const theme3 = document.getElementById("theme3");
|
||||
|
||||
if (localStorage.getItem("theme") === null) {
|
||||
localStorage.setItem("theme", "theme1");
|
||||
}
|
||||
|
||||
switch (localStorage.getItem("theme")) {
|
||||
case "theme1":
|
||||
theme1.checked = true;
|
||||
break;
|
||||
case "theme2":
|
||||
theme2.checked = true;
|
||||
break;
|
||||
case "theme3":
|
||||
theme3.checked = true;
|
||||
break;
|
||||
}
|
||||
|
||||
theme1.addEventListener("click", () => {
|
||||
theme2.checked = false;
|
||||
theme3.checked = false;
|
||||
localStorage.setItem("theme", "theme1");
|
||||
});
|
||||
theme1.addEventListener("click", changeTheme);
|
||||
|
||||
theme2.addEventListener("click", () => {
|
||||
theme1.checked = false;
|
||||
theme3.checked = false;
|
||||
localStorage.setItem("theme", "theme2");
|
||||
});
|
||||
theme2.addEventListener("click", changeTheme);
|
||||
|
||||
theme3.addEventListener("click", () => {
|
||||
theme1.checked = false;
|
||||
theme2.checked = false;
|
||||
localStorage.setItem("theme", "theme3");
|
||||
});
|
||||
theme3.addEventListener("click", changeTheme);
|
||||
|
||||
function changeTheme() {
|
||||
if (theme1.checked) {
|
||||
document.body.setAttribute("data-theme", "");
|
||||
} else if (theme2.checked) {
|
||||
document.body.setAttribute("data-theme", "light");
|
||||
} else if (theme3.checked) {
|
||||
document.body.setAttribute("data-theme", "purple");
|
||||
}
|
||||
}
|
||||
|
||||
changeTheme();
|
||||
|
||||
// Functionality
|
||||
class Calculator {
|
||||
constructor(prevOperandTextElement, currentOperandElement) {
|
||||
this.prevOperandTextElement = prevOperandTextElement;
|
||||
this.currentOperandTextElement = currentOperandTextElement;
|
||||
this.clear();
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.currentOperand = "";
|
||||
this.prevOperand = "";
|
||||
this.operation = undefined;
|
||||
}
|
||||
|
||||
delete() {
|
||||
this.currentOperand = this.currentOperand.toString().slice("0", -1);
|
||||
}
|
||||
|
||||
appendNumber(number) {
|
||||
if (number === "." && this.currentOperand.includes(".")) return;
|
||||
this.currentOperand =
|
||||
this.currentOperand.toString() + number.toString("number");
|
||||
}
|
||||
|
||||
chooseOperation(operation) {
|
||||
if (this.currentOperand === "") return;
|
||||
if (this.prevOperand !== "") {
|
||||
this.compute();
|
||||
}
|
||||
this.operation = operation;
|
||||
this.prevOperand = this.currentOperand;
|
||||
this.currentOperand = "";
|
||||
}
|
||||
|
||||
compute() {
|
||||
let computation;
|
||||
|
||||
const prev = parseFloat(this.prevOperand);
|
||||
const current = parseFloat(this.currentOperand);
|
||||
if (isNaN(prev) || isNaN(current)) return;
|
||||
|
||||
switch (this.operation) {
|
||||
case "+":
|
||||
computation = prev + current;
|
||||
break;
|
||||
case "-":
|
||||
computation = prev - current;
|
||||
break;
|
||||
case "/":
|
||||
computation = prev / current;
|
||||
break;
|
||||
case "x":
|
||||
computation = prev * current;
|
||||
break;
|
||||
case "*":
|
||||
computation = prev * current;
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
this.currentOperand = computation;
|
||||
this.operation = undefined;
|
||||
this.prevOperand = "";
|
||||
}
|
||||
|
||||
getDisplayNumber(number) {
|
||||
const stringNumber = number.toString();
|
||||
const integerDigits = parseFloat(stringNumber.split(".")[0]);
|
||||
const decimalDigits = stringNumber.split(".")[1];
|
||||
let integerDisplay;
|
||||
if (isNaN(integerDigits)) {
|
||||
integerDisplay = "";
|
||||
} else {
|
||||
integerDisplay = integerDigits.toLocaleString("en", {
|
||||
maximumFractionDigits: 0,
|
||||
});
|
||||
}
|
||||
|
||||
if (decimalDigits != null) {
|
||||
return `${integerDisplay}.${decimalDigits}`;
|
||||
} else {
|
||||
return integerDisplay;
|
||||
}
|
||||
}
|
||||
|
||||
updateDisplay() {
|
||||
this.currentOperandTextElement.innerText = this.getDisplayNumber(
|
||||
this.currentOperand
|
||||
);
|
||||
this.prevOperandTextElement.innerText = this.getDisplayNumber(
|
||||
this.prevOperand
|
||||
);
|
||||
|
||||
if (this.operation != undefined) {
|
||||
this.prevOperandTextElement.innerText = `${this.getDisplayNumber(
|
||||
this.prevOperand
|
||||
)} ${this.operation}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const numberButtons = document.querySelectorAll("[data-number]");
|
||||
const operationButtons = document.querySelectorAll("[data-operation]");
|
||||
const equalsButton = document.querySelector("[data-equals]");
|
||||
const deleteButton = document.querySelector("[data-del]");
|
||||
const reset = document.querySelector("[data-reset]");
|
||||
const prevOperandTextElement = document.querySelector(
|
||||
"[data-previous-operand]"
|
||||
);
|
||||
const currentOperandTextElement = document.querySelector(
|
||||
"[data-current-operand]"
|
||||
);
|
||||
|
||||
const calculator = new Calculator(
|
||||
prevOperandTextElement,
|
||||
currentOperandTextElement
|
||||
);
|
||||
|
||||
numberButtons.forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
calculator.appendNumber(button.innerText);
|
||||
calculator.updateDisplay();
|
||||
});
|
||||
});
|
||||
|
||||
operationButtons.forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
calculator.chooseOperation(button.innerText);
|
||||
calculator.updateDisplay();
|
||||
});
|
||||
});
|
||||
|
||||
equalsButton.addEventListener("click", (button) => {
|
||||
calculator.compute();
|
||||
calculator.updateDisplay();
|
||||
});
|
||||
|
||||
reset.addEventListener("click", (button) => {
|
||||
calculator.clear();
|
||||
calculator.updateDisplay();
|
||||
});
|
||||
|
||||
deleteButton.addEventListener("click", (button) => {
|
||||
calculator.delete();
|
||||
calculator.updateDisplay();
|
||||
});
|
||||
|
||||
document.body.addEventListener("keydown", (e) => {
|
||||
if (isNaN(e.key) === false || e.key === ".") {
|
||||
calculator.appendNumber(e.key);
|
||||
calculator.updateDisplay();
|
||||
} else if (e.key === "+" || e.key === "/" || e.key === "*" || e.key === "-") {
|
||||
calculator.chooseOperation(e.key);
|
||||
calculator.updateDisplay();
|
||||
} else if (e.key === "Enter") {
|
||||
calculator.compute();
|
||||
calculator.updateDisplay();
|
||||
} else if (e.key === "Backspace") {
|
||||
calculator.delete();
|
||||
calculator.updateDisplay();
|
||||
} else if (e.key === "Delete") {
|
||||
calculator.clear();
|
||||
calculator.updateDisplay();
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Another Calculator App</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="../css/App.css"
|
||||
media="screen"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h4>calc</h4>
|
||||
<p>THEME</p>
|
||||
<div class="theme">
|
||||
<div class="labels">
|
||||
<label for="theme1">1</label>
|
||||
<label for="theme2">2</label>
|
||||
<label for="theme3">3</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<input type="radio" id="theme1" name="theme1" />
|
||||
<input type="radio" id="theme2" name="theme2" />
|
||||
<input type="radio" id="theme3" name="theme3" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="display">
|
||||
<div data-previous-operand class="previousOperand"></div>
|
||||
<div data-current-operand class="currentOperand"></div>
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<button data-number>7</button>
|
||||
<button data-number>8</button>
|
||||
<button data-number>9</button>
|
||||
<button data-del class="blue">DEL</button>
|
||||
|
||||
<button data-number>4</button>
|
||||
<button data-number>5</button>
|
||||
<button data-number>6</button>
|
||||
<button data-operation>+</button>
|
||||
|
||||
<button data-number>1</button>
|
||||
<button data-number>2</button>
|
||||
<button data-number>3</button>
|
||||
<button data-operation>-</button>
|
||||
|
||||
<button data-number>.</button>
|
||||
<button data-number>0</button>
|
||||
<button data-operation>/</button>
|
||||
<button data-operation>x</button>
|
||||
|
||||
<button data-reset class="span-2 blue">RESET</button>
|
||||
<button data-equals class="span-2 red">=</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user