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

Add tooltips, pointer style, and change CE class name

Browse source
This commit is contained in:
lolabird 2023-12-28 11:22:22 -07:00
commit 8ceafac46f
3 changed files with 26 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

15
index.html
View file

@ -15,9 +15,18 @@
<div class="main-screen">0</div> <div class="main-screen">0</div>
</div> </div>
<button class="clear all">C</button> <button class="clear all tooltip">
<button class="clear error">CE</button> C
<button class="plus-minus">+/-</button> <span class="tooltiptext">Keys: c, Esc</span>
</button>
<button class="clear entry tooltip">
CE
<span class="tooltiptext">Keys: Back, Del </span>
</button>
<button class="plus-minus tooltip">
+/-
<span class="tooltiptext">Key: _</span>
</button>
<button id="multiply" class="operator">*</button> <button id="multiply" class="operator">*</button>

4
script.js
View file

@ -86,7 +86,7 @@ function clear() {
mainScreen.textContent = "0"; mainScreen.textContent = "0";
topScreen.textContent = ""; topScreen.textContent = "";
} else if (this.classList.contains("error") && mainScreen.textContent !== "0") { } else if (this.classList.contains("entry") && mainScreen.textContent !== "0") {
if (/^[0-9.]+$/.test(mainScreen.textContent)) { if (/^[0-9.]+$/.test(mainScreen.textContent)) {
mainScreen.textContent = mainScreen.textContent.slice(0, -1); mainScreen.textContent = mainScreen.textContent.slice(0, -1);
} else { } else {
@ -201,7 +201,7 @@ function handleKeys(e) {
} else if (e.key === ".") { } else if (e.key === ".") {
button = document.querySelector("#dec"); button = document.querySelector("#dec");
} else if (e.key === "Backspace" || e.key === "Delete") { } else if (e.key === "Backspace" || e.key === "Delete") {
button = document.querySelector(".error"); button = document.querySelector(".entry");
} else if (e.key === "c" || e.key === "Escape") { } else if (e.key === "c" || e.key === "Escape") {
button = document.querySelector(".all"); button = document.querySelector(".all");
} else if (operators.hasOwnProperty(e.key)) { } else if (operators.hasOwnProperty(e.key)) {

12
style.css
View file

@ -56,7 +56,9 @@ button {
width: 100px; width: 100px;
font-size: 50px; font-size: 50px;
border-color: #eee; border-color: #eee;
border-radius: 5px;
box-shadow: 1px 2px 10px 1px #222; box-shadow: 1px 2px 10px 1px #222;
cursor: pointer;
} }
button:hover { button:hover {
@ -69,6 +71,16 @@ button:active, .active {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
} }
.tooltip .tooltiptext {
visibility: hidden;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext, .tooltip:focus .tooltiptext {
visibility: visible;
opacity: 1;
}
.num, .plus-minus { .num, .plus-minus {
background: #d9e1f2; background: #d9e1f2;
} }