Skip to content

Commit

Permalink
Fix memory buttons and dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@rafa-net
rafa-net committed May 25, 2024
1 parent a2bac37 commit 50ff0cb
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 89 deletions.
35 changes: 12 additions & 23 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,40 +8,30 @@
<title>Calculator</title>
</head>

<body>



<body class="light-mode">
<div class="container">

<div id="display" class="display">
<span id="displayText">
0
</span>
</div>

<div id="calculator" class="calculator">

<div id="upper-calc-container">
<button id="color-scheme-toggle">
<span></span>
<span></span>
</button>
</div>


<p id="calcLogo">
<span class="calc-title">TOP-24<br></span>
<span class="calc-subtitle">14 DIGITS</span>
</p>


<button id="allClear" class="button special memory" tabindex="0" data-key=" " data-value="AC">AC</button>
<button class="button special memory" tabindex="0" data-key="!" data-value="M+">M+</button>
<button class="button special memory" tabindex="0" data-key="@" data-value="M-">M-</button>
<button class="button special memory" tabindex="0" data-key="#" data-value="MR">MR</button>
<button class="button special memory" tabindex="0" data-key="$" data-value="GT">GT</button>
<button class="button special memory" tabindex="0" data-key="C" data-value="CE">CE</button>
<p id="calcLogo">
<span class="calc-title">TOP-24<br></span>
<span class="calc-subtitle">14 DIGITS</span>
</p>
<button id="allClear" class="button special" tabindex="0" data-key=" " data-value="AC">AC</button>
<button class="button memory" tabindex="0" data-key="!" data-value="M+">M+</button>
<button class="button memory" tabindex="0" data-key="@" data-value="M-">M-</button>
<button class="button memory" tabindex="0" data-key="#" data-value="MR">MR</button>
<button class="button memory" tabindex="0" data-key="$" data-value="GT">GT</button>
<button class="button special clear" tabindex="0" data-key="C" data-value="CE">CE</button>
<button class="button number" tabindex="0" data-key="7" data-value="7">7</button>
<button class="button number" tabindex="0" data-key="8" data-value="8">8</button>
<button class="button number" tabindex="0" data-key="9" data-value="9">9</button>
Expand All @@ -63,9 +53,8 @@
<button class="button special" tabindex="0" data-key="=" data-value="=">=</button>
<button class="button operator" tabindex="0" data-key="+" data-value="+">+</button>
</div>

</div>
<script type="module" src="scripts.js"></script>
<script src="scripts.js"></script>
</body>

</html>
86 changes: 47 additions & 39 deletions scripts.js
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,4 @@

function toggleColorScheme() {
const bodyElement = document.body;
if (bodyElement.classList.contains('dark-mode') && display.classList.contains('dark-mode')) {
bodyElement.classList.remove('dark-mode');
bodyElement.classList.add('light-mode');
display.classList.remove('dark-mode');
display.classList.add('light-mode');
} else {
bodyElement.classList.remove('light-mode');
bodyElement.classList.add('dark-mode');
display.classList.remove('light-mode');
display.classList.add('dark-mode');
}
}

document.addEventListener('DOMContentLoaded', () => {
const toggleButton = document.getElementById('color-scheme-toggle');
toggleButton.addEventListener('click', toggleColorScheme);
});

document.addEventListener('DOMContentLoaded', function () {
const toggleButton = document.getElementById('color-scheme-toggle');
toggleButton.addEventListener('click', function () {
this.classList.toggle('dark-mode');
});
});


const numberButtons = document.querySelectorAll(".button.number");
const specialButtons = document.querySelectorAll(".button.special");
const operatorButtons = document.querySelectorAll(".button.operator");
Expand All @@ -44,6 +16,8 @@ let repeatLastOperation = false;
let memoryNumber = "";
let displayValue = "";
let memoryRecallPressed = 0;
let memoryPlusPressed = 0;
let memoryMinusPressed = 0;
let grandTotal = 0;


Expand Down Expand Up @@ -71,6 +45,25 @@ function percentage(a, b) {
return (100 * a) / b;
}

document.addEventListener('DOMContentLoaded', function () {
const toggleButton = document.getElementById('color-scheme-toggle');
toggleButton.addEventListener('click', function () {
this.classList.toggle('dark-mode');
const bodyElement = document.body;
if (bodyElement.classList.contains('dark-mode') && display.classList.contains('dark-mode')) {
bodyElement.classList.remove('dark-mode');
bodyElement.classList.add('light-mode');
display.classList.remove('dark-mode');
display.classList.add('light-mode');
} else {
bodyElement.classList.remove('light-mode');
bodyElement.classList.add('dark-mode');
display.classList.remove('light-mode');
display.classList.add('dark-mode');
}
});
});

function applyPercentage(operator, baseValue, percentageValue) {
let result;
let percentageDecimal = percentageValue / 100;
Expand Down Expand Up @@ -151,6 +144,7 @@ function setupButtonListeners(buttons) {
}

function handleButtonClick(button) {
console.log("Button clicked:", button.dataset.value);
const value = button.dataset.value;

if (button.classList.contains("number")) {
Expand Down Expand Up @@ -226,6 +220,8 @@ function handleSpecial(specialValue) {
function handleOperator(symbol) {
if (symbol === "sqrt") {
handleSqrtOperation();
} else if (symbol === '%' && !operator) {
return;
} else if (symbol === '%' && operator !== "%" && firstNumber !== null && displayValue !== "") {
handlePercentageOperation();
} else if (symbol === null && repeatLastOperation) {
Expand All @@ -244,29 +240,38 @@ function handleOperator(symbol) {
function handleMemory(memory) {
if (memoryRecallPressed > 1) {
memoryNumber = 0;
memoryPlusPressed = 0;
memoryMinusPressed = 0;
}



if (memory === "MR") {
displayValue = memoryNumber;
updateDisplay(displayValue);
displayValue = "";
memoryRecallPressed++;
return;
}

if (memory === "M-" && memoryNumber === 0) {
return;
}
if (memory === "M+") {
memoryNumber += displayValue;
updateDisplay(displayValue);
} else if (memory === "M-") {
memoryNumber -= displayValue;
updateDisplay(displayValue);
else if (memory === "M-") {
memoryNumber = (Number(memoryNumber) - Number(displayValue));
displayValue = memoryNumber.toString();
return;
}

if (memory === "M+" && memoryPlusPressed === 0) {
memoryNumber = displayValue;
memoryPlusPressed++;
displayValue = "";
} else if (memory === "M+" && memoryPlusPressed !== 0) {
memoryNumber = (Number(displayValue) + Number(memoryNumber));
displayValue = memoryNumber.toString();
memoryPlusPressed++;
}

}


function handleSqrtOperation() {
let result = Math.sqrt(firstNumber);
displayValue = result.toString();
Expand Down Expand Up @@ -341,13 +346,16 @@ function clearAll() {
lastOperator = null;
lastSecondNumber = null;
repeatLastOperation = false;
memoryNumber = 0;
memoryRecallPressed = 0;
memoryPlusPressed = 0;
displayValue = "";
displayText.innerHTML = "0";
}

function clearEntry() {
displayText.innerHTML = "0";
displayValue = "";
displayValue = "";
if (operator) {
secondNumber = null;
} else {
Expand Down
51 changes: 24 additions & 27 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@
--drop-shadow-btn: green;
}

/* Light mode styles */
.light-mode {
--background-color: beige;
--text-color: #222222;
Expand All @@ -47,10 +46,10 @@
--box-shadow-darkest: rgba(0, 0, 0, 0.5);
--box-shadow-darker: rgba(0, 0, 0, 0.4);
--box-shadow-dark: rgba(0, 0, 0, 0.2);
--border-color: rgb(161, 161, 161);
--drop-shadow-btn: green;
}

/* Dark mode styles */
.dark-mode {
--background-color: #0a0a23;
--text-color: #ced4e2;
Expand All @@ -70,11 +69,13 @@
--bksp-bg-color: #ffff00;
--bksp-txt-color: rgb(0, 0, 0);
--box-shadow: rgb(64, 64, 64);
--border-color: gainsboro;
--box-shadow-darkest: rgba(0, 0, 0, 0.5);
--box-shadow-darker: rgba(0, 0, 0, 0.4);
--box-shadow-dark: rgba(0, 0, 0, 0.2);
--border-color: rgb(185, 185, 185);
--drop-shadow-btn: magenta;
}


* {
font-family: "IBM Plex Mono", monospace;
font-size: 1.125em;
Expand All @@ -98,14 +99,12 @@ body {
color: var(--text-color);
}



.container {
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(145deg, #757575, #424242);
border: 4px outset var(--border-color);
border: 6px outset var(--border-color);
border-radius: 10px;
padding: 16px 18px;
box-shadow: 0 8px 16px var(--box-shadow-darkest);
Expand Down Expand Up @@ -163,7 +162,8 @@ body {
color: var(--equals-txt-color);
}

.button.special.memory {
.button.memory,
.button.clear {
display: flex;
align-items: center;
justify-content: center;
Expand Down Expand Up @@ -198,7 +198,7 @@ body {
filter: brightness(0.8);
}

button#allClear {
#allClear {
grid-column: 5;
display: flex;
align-items: center;
Expand All @@ -207,12 +207,10 @@ button#allClear {
color: var(--ac-txt-color);
border-radius: 5px;
height: 80%;
box-shadow: 0 4px var(--box-shadow);
box-shadow: 2px 2px var(--box-shadow);
cursor: pointer;
}



#calcLogo {
display: flex;
flex-direction: column;
Expand All @@ -232,21 +230,6 @@ button#allClear {
font-size: 1.5em;
}


@keyframes blink {
0% {
opacity: 1;
}

50% {
opacity: 0.2;
}

100% {
opacity: 1;
}
}

.display-blink {
animation: 100ms blink;
}
Expand Down Expand Up @@ -308,4 +291,18 @@ button#allClear {
#color-scheme-toggle.dark-mode span:nth-child(2) {
left: 65px;
background-color: cyan
}

@keyframes blink {
0% {
opacity: 1;
}

50% {
opacity: 0.2;
}

100% {
opacity: 1;
}
}

0 comments on commit 50ff0cb

Please sign in to comment.