feat: added display method

calculator/css/style.css

@@ -37,6 +37,10 @@
     margin: 5px;
     font-size: 25px;
     width: 110px;
+    -webkit-transition: all 0.5s; /* add this line, chrome, safari, etc */
+    -moz-transition: all 0.5s; /* add this line, firefox */
+    -o-transition: all 0.5s; /* add this line, opera */
+    transition: all 0.5s; /* add this line */
 }
 
 #clear {
@@ -51,6 +55,14 @@
     width: 230px;
 }
 
+#action:hover {
+    background-color: #F0ECE2;
+}
+
+#clear:hover {
+    background-color: #FF6D60;
+}
+
 body {
     display: flex;
     justify-content: center;

calculator/index.html

@@ -15,26 +15,27 @@
             0
         </div>
         <div class="buttons">
-            <button id="clear" class="btn">A/C</button>
+            <button id="clear" class="btn" value="cls">A/C</button>
-            <button id="action" class="btn">+/-</button>
+            <button id="action" class="btn" value="+/-">+/-</button>
-            <button id="action" class="btn">%</button>
+            <button id="action" class="btn" value="%">%</button>
-            <button id="action" class="btn">÷</button>
+            <button id="action" class="btn" value="÷">÷</button>
-            <button class="btn">7</button>
+            <button class="btn" value="7">7</button>
-            <button class="btn">8</button>
+            <button class="btn" value="8">8</button>
-            <button class="btn">9</button>
+            <button class="btn" value="9">9</button>
-            <button id="action" class="btn">*</button>
+            <button id="action" class="btn" value="*">*</button>
-            <button class="btn">4</button>
+            <button class="btn" value="4">4</button>
-            <button class="btn">5</button>
+            <button class="btn" value="5">5</button>
-            <button class="btn">6</button>
+            <button class="btn" value="6">6</button>
-            <button id="action" class="btn">-</button>
+            <button id="action" class="btn" value="-">-</button>
-            <button class="btn">1</button>
+            <button class="btn" value="1">1</button>
-            <button class="btn">2</button>
+            <button class="btn" value="2">2</button>
-            <button class="btn">3</button>
+            <button class="btn" value="3">3</button>
-            <button id="action" class="btn">+</button>
+            <button id="action" class="btn" value="+">+</button>
-            <button id="zero" class="btn">0</button>
+            <button id="zero" class="btn" value="0">0</button>
-            <button id="decimal" class="btn">.</button>
+            <button id="decimal" class="btn" value=".">.</button>
-            <button id="action" class="btn">=</button>
+            <button id="action" class="btn" value="=">=</button>
         </div>
    </div> 
+   <script src="js/script.js"></script>
 </body>
 </html>

calculator/js/script.js

@@ -1,6 +1,10 @@
-let firstNum = undefined
+let firstNum = undefined;
-let secondNum = undefined
+let secondNum = undefined;
-let operator = undefined
+let operator = undefined;
+let screen = document.querySelector('.screen');
+
+
+const buttons = document.querySelectorAll('.btn');
 
 function add(x, y) {
     return Number(x + y);
@@ -35,3 +39,23 @@ function operate(firstNum, secondNum, operator) {
             return divive(firstNum, secondNum);
     }
 }
+
+function updateDisplay(displayValue) {
+    let currentScreen = screen.textContent.trim();
+    console.log(currentScreen);
+    if (currentScreen.length >= 8) return;
+
+    if (Number(currentScreen) === 0) {
+        screen.textContent = displayValue;
+    } else {
+        screen.textContent += displayValue;
+    }
+}
+
+
+
+buttons.forEach(btn => {
+    btn.addEventListener('click', e => {
+         updateDisplay(e.target.value);
+    });
+});