From 574e15e8a1d24c5b7d5cfa06388757cfa1e345a5 Mon Sep 17 00:00:00 2001
From: lolabird <octavia@octavianichols.com>
Date: Thu, 28 Dec 2023 11:41:43 -0700
Subject: [PATCH] Add tooltip styles; allow for both c and C to be pressed for
 clear

---
 index.html |  2 +-
 script.js  |  2 +-
 style.css  | 26 +++++++++++++++++++++++++-
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 3ae9b60..0215b12 100644
--- a/index.html
+++ b/index.html
@@ -17,7 +17,7 @@
             
             <button class="clear all tooltip">
                 C
-                <span class="tooltiptext">Keys: c, Esc</span>
+                <span class="tooltiptext">Keys: C, Esc</span>
             </button>
             <button class="clear entry tooltip">
                 CE
diff --git a/script.js b/script.js
index a42f391..9e5eb3e 100644
--- a/script.js
+++ b/script.js
@@ -202,7 +202,7 @@ function handleKeys(e) {
         button = document.querySelector("#dec");
     } else if (e.key === "Backspace" || e.key === "Delete") {
         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");
     } else if (operators.hasOwnProperty(e.key)) {
         e.preventDefault();
diff --git a/style.css b/style.css
index bf3d9ee..3a16350 100644
--- a/style.css
+++ b/style.css
@@ -5,7 +5,7 @@ body {
     flex-direction: column;
     height: 100vh;
     margin: 0;
-    background-color: rgb(9, 73, 9);
+    background-color: #094909;
     color: #eee;
 }
 
@@ -74,8 +74,32 @@ button:active, .active {
 .tooltip .tooltiptext {
     visibility: hidden;
     position: absolute;
+    bottom: 115%;
+    right: -15%;
     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 {
     visibility: visible;
     opacity: 1;