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 tooltip styles; allow for both c and C to be pressed for clear

Browse source
This commit is contained in:
lolabird 2023-12-28 11:41:43 -07:00
commit 574e15e8a1
3 changed files with 27 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -17,7 +17,7 @@
<button class="clear all tooltip"> <button class="clear all tooltip">
C C
<span class="tooltiptext">Keys: c, Esc</span> <span class="tooltiptext">Keys: C, Esc</span>
</button> </button>
<button class="clear entry tooltip"> <button class="clear entry tooltip">
CE CE

2
script.js
View file

@ -202,7 +202,7 @@ function handleKeys(e) {
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(".entry"); button = document.querySelector(".entry");
} else if (e.key === "c" || e.key === "Escape") { } else if (e.key === "c" || 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)) {
e.preventDefault(); e.preventDefault();

26
style.css
View file

@ -5,7 +5,7 @@ body {
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
margin: 0; margin: 0;
background-color: rgb(9, 73, 9); background-color: #094909;
color: #eee; color: #eee;
} }
@ -74,8 +74,32 @@ button:active, .active {
.tooltip .tooltiptext { .tooltip .tooltiptext {
visibility: hidden; visibility: hidden;
position: absolute; position: absolute;
bottom: 115%;
right: -15%;
z-index: 1; z-index: 1;
width: 120px;
font-size: 20px;
background: #094909;
color: #eee;
opacity: 0;
transition: opacity 0.7s;
padding: 5px;
border-radius: 5px;
} }
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #094909 transparent transparent transparent;
}
.tooltip:hover .tooltiptext, .tooltip:focus .tooltiptext { .tooltip:hover .tooltiptext, .tooltip:focus .tooltiptext {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;