Octavia/odin-calculator
Watch
1
0
Fork
You've already forked odin-calculator
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move initial calculations to top screen

Browse source
This commit is contained in:
lolabird 2023-12-27 13:52:37 -07:00
commit 61a3c3b929
2 changed files with 11 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

11
script.js
View file

@ -1,4 +1,5 @@
const mainScreen = document.querySelector(".main-screen");
const topScreen = document.querySelector(".top-screen");
const buttons = document.querySelectorAll("button");
const operators = ["+", "-", "*", "/"];
@ -10,8 +11,9 @@ buttons.forEach((button) => {
function displayToScreen() {
if (this.className == "equal") {
let calc = new Calculator;
topScreen.textContent += mainScreen.textContent;
mainScreen.textContent = calc.calculate(mainScreen.textContent);
mainScreen.textContent = calc.calculate(topScreen.textContent);
} else if (this.classList.contains("all")) {
mainScreen.textContent = "0";
} else if (this.classList.contains("error") && mainScreen.textContent !== "0") {
@ -27,7 +29,7 @@ function displayToScreen() {
}
} else {
if (this.className == "operator") {
let screenContent = mainScreen.textContent;
let screenContent = topScreen.textContent;
// Add some logic for handling negatives with -
// Add key support
@ -37,13 +39,14 @@ function displayToScreen() {
if (operators.includes(screenContent[i])) {
let calc = new Calculator;
result = calc.calculate(mainScreen.textContent);
result = calc.calculate(topScreen.textContent);
mainScreen.textContent = result;
break;
}
}
mainScreen.textContent += " " + this.textContent + " ";
topScreen.textContent += mainScreen.textContent + " " + this.textContent + " ";
mainScreen.textContent = "0";
} else if (mainScreen.textContent === "0" && this.className == "num") {
mainScreen.textContent = this.textContent;

7
style.css
View file

@ -39,15 +39,16 @@ main {
background: #eee;
color: #111;
text-align: right;
font-size: 80px;
display: flex;
flex-direction: column;
}
.top-screen {
height: 20%;
height: 40%;
font-size: 20px;
}
.main-screen {
height: 80%;
height: 60%;
font-size: 50px;
}
button {