Split display

index.html

@@ -10,7 +10,11 @@
     <header><h1>Calculator</h1></header>
     <main>
         <div class="calculator">
-            <div class="screen">0</div>
+            <div class="display">
+                <div class="top-screen"></div>
+                <div class="main-screen">0</div>
+            </div>
+            
             <button class="clear all">C</button>
             <button class="clear error">CE</button>
 
@@ -28,7 +32,7 @@
             <button class="num">2</button>
             <button class="num">3</button>
             <button class="operator">-</button>
-            
+
             <button class="num">0</button>
             <button class="num">.</button>
             <button class="equal">=</button>

script.js

@@ -1,4 +1,4 @@
-const screen = document.querySelector(".screen");
+const mainScreen = document.querySelector(".main-screen");
 const buttons = document.querySelectorAll("button");
 const operators = ["+", "-", "*", "/"];
 
@@ -11,44 +11,44 @@ function displayToScreen() {
     if (this.className == "equal") {
         let calc = new Calculator;
 
-        screen.textContent = calc.calculate(screen.textContent);
+        mainScreen.textContent = calc.calculate(mainScreen.textContent);
     } else if (this.classList.contains("all")) {
-        screen.textContent = "0";
+        mainScreen.textContent = "0";
-    } else if (this.classList.contains("error") && screen.textContent !== "0") {
+    } else if (this.classList.contains("error") && mainScreen.textContent !== "0") {
-            screen.textContent = screen.textContent.trimEnd()
+            mainScreen.textContent = mainScreen.textContent.trimEnd()
-            screen.textContent = screen.textContent.slice(0, -1);
+            mainScreen.textContent = mainScreen.textContent.slice(0, -1);
 
-            if (!isNaN(screen.textContent.charAt(-2))) {
+            if (!isNaN(mainScreen.textContent.charAt(-2))) {
-                 screen.textContent = screen.textContent.trimEnd()
+                 mainScreen.textContent = mainScreen.textContent.trimEnd()
             }
 
-            if (screen.textContent === "") {
+            if (mainScreen.textContent === "") {
-                screen.textContent = "0"
+                mainScreen.textContent = "0"
             }
     } else {
         if (this.className == "operator") {
-            let screenContent = screen.textContent;
+            let screenContent = mainScreen.textContent;
 
             // Add some logic for handling negatives with -
             // Add key support
-            //limit character size in screen
+            // limit character size in mainScreen -- first step is to move numbers from the main mainScreen to somewhere else every time a new operator is used and then change what gets sent to the calculator to that new location
 
             for (let i = 0; i < screenContent.length; i++ ) {
                 if (operators.includes(screenContent[i])) {
                     let calc = new Calculator;
 
-                    result = calc.calculate(screen.textContent);
+                    result = calc.calculate(mainScreen.textContent);
-                    screen.textContent = result;
+                    mainScreen.textContent = result;
                     break;
                 }
             } 
 
-            screen.textContent += " " + this.textContent + " ";
+            mainScreen.textContent += " " + this.textContent + " ";
 
-        } else if (screen.textContent === "0" && this.className == "num") {
+        } else if (mainScreen.textContent === "0" && this.className == "num") {
-            screen.textContent = this.textContent;
+            mainScreen.textContent = this.textContent;
         } else if (this.className == "num") {
-            screen.textContent += this.textContent;
+            mainScreen.textContent += this.textContent;
         }
     }
 }

style.css

@@ -31,7 +31,7 @@ main {
     box-shadow: 1px 2px 10px 1px #222;
 }
 
-.screen {
+.display {
     grid-column: 1 / span 4;
     height: 100px;
     max-width: 415px;
@@ -40,6 +40,14 @@ main {
     color: #111;
     text-align: right;
     font-size: 80px;
+    display: flex;
+    flex-direction: column;
+}
+.top-screen {
+    height: 20%;
+}
+.main-screen {
+    height: 80%;
 }
 
 button {