Add clear numbers functinality

index.html

@@ -30,7 +30,7 @@
         <button class="subtract operator" value="-">-</button>
         <button class="clear" value="clear">C</button>
         <button class="number" value="0">0</button>
-        <button class="equals" value="">=</button>
+        <button class="equals" value="=">=</button>
         <button class="add operator" value="+">+</button>
       </div>
     </div>

scrpit.js

@@ -1,5 +1,36 @@
-// limit to 9 characters
+const VISOR_REGISTER = document.querySelector('.register')
+const VISOR_OPERATION = document.querySelector('.operation')
+const BUTTONS = document.querySelectorAll('.grid button')
 
+const CURRENT_OPERATION = []
+
+BUTTONS.forEach((button) => button.addEventListener('click', ManageOperations))
+
+function ManageOperations(e) {
+  const button = e.target
+  if (button.classList.contains('number')) {
+    populateVisorOperation(button)
+  } else if (button.classList.contains('clear')) {
+    clearNumbers()
+  } else if (button.classList.contains('operator')) {
+
+  }
+}
+
+function populateVisorOperation(button) {
+  if (CURRENT_OPERATION.length < 9) {
+    CURRENT_OPERATION.push(button.value)
+    VISOR_OPERATION.textContent = CURRENT_OPERATION.join('')
+  }
+}
+
+function clearNumbers() {
+  if (CURRENT_OPERATION.length > 0) {
+    CURRENT_OPERATION.splice(0)
+    VISOR_OPERATION.textContent = ''
+    VISOR_REGISTER.textContent = ''
+  }
+}
 
 function operate(n1, operator, n2) {
   if (operator === '+') add(n1, n2)

style.css

@@ -21,7 +21,7 @@ body {
   padding: 18px;
   display: flex;
   flex-direction: column;
-  gap: 19px;
+  gap: 18px;
   box-shadow: 8px 8px 3px rgba(0, 0, 0, 0.25);
 }
 .visor {