Add tooltips, pointer style, and change CE class name

index.html

@@ -15,9 +15,18 @@
                 <div class="main-screen">0</div>
             </div>
             
-            <button class="clear all">C</button>
-            <button class="clear error">CE</button>
-            <button class="plus-minus">+/-</button>
+            <button class="clear all tooltip">
+                C
+                <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>
 
 

script.js

@@ -86,7 +86,7 @@ function clear() {
         mainScreen.textContent = "0";
         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)) {
                 mainScreen.textContent = mainScreen.textContent.slice(0, -1);
             } else {
@@ -201,7 +201,7 @@ function handleKeys(e) {
     } else if (e.key === ".") {
         button = document.querySelector("#dec");
     } else if (e.key === "Backspace" || e.key === "Delete") {
-        button = document.querySelector(".error");
+        button = document.querySelector(".entry");
     } else if (e.key === "c" || e.key === "Escape") {
         button = document.querySelector(".all");
     } else if (operators.hasOwnProperty(e.key)) {

style.css

@@ -56,7 +56,9 @@ button {
     width: 100px;
     font-size: 50px;
     border-color: #eee;
+    border-radius: 5px;
     box-shadow: 1px 2px 10px 1px #222;
+    cursor: pointer;
 }
 
 button:hover {
@@ -69,6 +71,16 @@ button:active, .active {
     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 {
     background: #d9e1f2;
 }