Add function to update content of screen

index.html

@@ -10,7 +10,7 @@
     <header><h1>Calculator</h1></header>
     <main>
         <div class="calculator">
-            <div class="screen"></div>
+            <div class="screen">0</div>
             <button class="num">1</button>
             <button class="num">2</button>
             <button class="num">3</button>
@@ -37,6 +37,6 @@
     
 
 
-    <script scr="script.js"></script>
+    <script src="script.js"></script>
 </body>
 </html>

script.js

@@ -1,3 +1,20 @@
+const screen = document.querySelector(".screen")
+const buttons = document.querySelectorAll("button")
+
+buttons.forEach((button) => {
+    button.addEventListener ("click", displayToScreen);
+});
+
+function displayToScreen() {
+
+    if(this.className == "equal") {
+        //testButton();
+    } else {
+        screen.textContent = this.textContent;
+        console.log("A button was pressed")
+    }
+}
+
 function Calculator(str) {
 
     this.methods = {

style.css

@@ -34,6 +34,7 @@ main {
     grid-column: 1 / span 4;
     height: 100px;
     background: #eee;
+    color: #111;
 }
 
 button {