Add clear, clear error and decimal buttons

index.html

@@ -11,6 +11,8 @@
     <main>
         <div class="calculator">
             <div class="screen">0</div>
+            <button class="clear">C</button>
+            <button class="back">CE</button>
             <button class="num">7</button>
             <button class="num">8</button>
             <button class="num">9</button>
@@ -24,7 +26,7 @@
             <button class="num">3</button>
             <button class="operator">-</button>
             <button class="num">0</button>
-            <button class="clear">C</button>
+            <button class="num">.</button>
             <button class="equal">=</button>
             <button class="operator">+</button>
         </div>

script.js

@@ -8,17 +8,27 @@ buttons.forEach((button) => {
 
 
 function displayToScreen() {
-
     if (this.className == "equal") {
         let calc = new Calculator;
 
         screen.textContent = calc.calculate(screen.textContent);
     } else if (this.className == "clear") {
         screen.textContent = "0";
+    } else if (this.className == "back") {
+        screen.textContent = screen.textContent.trimEnd()
+        screen.textContent = screen.textContent.slice(0, -1);
+
+        if (!isNaN(screen.textContent.charAt(-2))) {
+            screen.textContent = screen.textContent.trimEnd()
+        }
     } else {
         if (this.className == "operator") {
             let screenContent = screen.textContent;
 
+            // Add some logic for handling negatives with -
+            // Handle decimals add 0 on a trailing decimal point
+            // Add key support
+
             for (let i = 0; i < screenContent.length; i++ ) {
                 if (operators.includes(screenContent[i])) {
                     let calc = new Calculator;

style.css

@@ -45,6 +45,11 @@ button {
     font-size: 50px
 }
 
+.clear, .back {
+    grid-column: span 2;
+    width: 205px;
+}
+
 footer {
     flex: 0 0 auto;
 }