New solution

index.html

@@ -28,10 +28,10 @@
         <button class="number" id="number-3">3</button>
       </div>
       <div class="row operations">
-        <!-- <button id="add">+</button>
+        <button id="add">+</button>
         <button id="subtract">-</button>
         <button id="multiply">*</button>
-        <button id="divide">/</button> -->
+        <button id="divide">/</button>
       </div>
       <div class="row last-row">
         <button id="clear">C</button>

script.js

@@ -0,0 +1,74 @@
+let display=document.querySelector('.display')
+let x,y;
+let result;
+let operator;
+
+let plus = document.getElementById('add')
+let subtract = document.getElementById('subtract')
+let multiply = document.getElementById('multiply')
+let divide = document.getElementById('divide')
+
+plus.addEventListener('click', function(){
+    operator='+';
+    display.textContent='+';
+})
+subtract.addEventListener('click', function(){
+    operator='-';
+    display.textContent='-';
+})
+multiply.addEventListener('click', function(){
+    operator='*';
+    display.textContent='*';
+})
+divide.addEventListener('click', function(){
+    operator='/';
+    display.textContent='/';
+})
+
+let equal = document.querySelector('#equal')
+
+let num = document.querySelectorAll('.number').forEach(btn=>{
+    btn.addEventListener('click', function(){
+        if(!operator){
+            x=Number(btn.textContent);
+            display.textContent=btn.textContent;
+        }
+        else{
+            y=Number(btn.textContent);
+            display.textContent=btn.textContent;
+        }
+    })
+})
+
+
+equal.addEventListener('click', function(){
+    if(operator=='+'){
+        result=x+y;
+        display.textContent=result;
+    }
+    if(operator=='-'){
+        result = x-y;
+        display.textContent=result;
+    }
+    if(operator=='*'){
+        result=x*y;
+        display.textContent=result;
+    }
+    if(operator=='/'){
+        result=x/y;
+        display.textContent=result;
+    }
+    operator='';
+    x=result;
+
+})
+
+let clear = document.getElementById('clear')
+clear.addEventListener('click', function(){
+    x=0;
+    y=0;
+    operator='';
+    display.textContent=""
+})
+
+

style.css

@@ -45,6 +45,7 @@ body {
     text-align: right;
     margin-bottom: 10px;
     overflow-x: auto;
+    height: 95px;
 }
 
 .buttons {
@@ -81,7 +82,6 @@ button:active {
     transform: translateY(0);
 }
 
-/* Operations Row Styling */
 .operations button {
     background-color: var(--op-bg);
     color: var(--op-color);
@@ -92,14 +92,13 @@ button:active {
     filter: brightness(110%);
 }
 
-/* Last Row Styling */
 .last-row button {
-    background-color: #10b981; /* Green for equals/action */
+    background-color: #10b981;
     color: white;
 }
 
 .last-row button:first-child {
-    background-color: #ef4444; /* Red for Clear */
+    background-color: #ef4444; 
 }
 
 .last-row button:nth-child(2) {