seats remaining logic done

khalid586 · Feb 18, 2024 · f44edf2 · f44edf2
1 parent 154647b
commit f44edf2
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -16,21 +16,21 @@
     </style>
 </head>
 <body>
-    <p class="bg-green-200 w-48 rounded-lg text-green-700 my-4 p-2">Seats reaminging: <span class="text-green-800">40</span></p>
+    <p class="bg-green-200 w-48 rounded-lg text-green-700 my-4 p-2">Seats remaining: <span class="text-green-800" id = "remaining">40</span></p>
 
     <div class="grid grid-cols-4 lg:w-1/3">
-        <button class = "seats bg-slate-200 hover:bg-green-500 hover:text-white rounded-lg m-4 p-2 text-center" id = "A1">A1</button>
-        <button class = "seats bg-slate-200 hover:bg-green-500 hover:text-white rounded-lg m-4 p-2 text-center" id = "A2">A2</button>
-        <button class = "seats bg-slate-200 hover:bg-green-500 hover:text-white rounded-lg m-4 p-2 text-center" id = "A3">A3</button>
-        <button class = "seats bg-slate-200 hover:bg-green-500 hover:text-white rounded-lg m-4 p-2 text-center" id = "A4">A4</button>
-        <button class = "seats bg-slate-200 hover:bg-green-500 hover:text-white rounded-lg m-4 p-2 text-center" id = "B1">B1</button>
-        <button class = "seats bg-slate-200 hover:bg-green-500 hover:text-white rounded-lg m-4 p-2 text-center" id = "B2">B2</button>
-        <button class = "seats bg-slate-200 hover:bg-green-500 hover:text-white rounded-lg m-4 p-2 text-center" id = "B3">B3</button>
-        <button class = "seats bg-slate-200 hover:bg-green-500 hover:text-white rounded-lg m-4 p-2 text-center" id = "B4">B4</button>
-        <button class = "seats bg-slate-200 hover:bg-green-500 hover:text-white rounded-lg m-4 p-2 text-center" id = "C1">C1</button>
-        <button class = "seats bg-slate-200 hover:bg-green-500 hover:text-white rounded-lg m-4 p-2 text-center" id = "C2">C2</button>
-        <button class = "seats bg-slate-200 hover:bg-green-500 hover:text-white rounded-lg m-4 p-2 text-center" id = "C3">C3</button>
-        <button class = "seats bg-slate-200 hover:bg-green-500 hover:text-white rounded-lg m-4 p-2 text-center" id = "C4">C4</button>
+        <button class = "seats bg-slate-200 rounded-lg m-4 p-2 text-center" id = "A1">A1</button>
+        <button class = "seats bg-slate-200 rounded-lg m-4 p-2 text-center" id = "A2">A2</button>
+        <button class = "seats bg-slate-200 rounded-lg m-4 p-2 text-center" id = "A3">A3</button>
+        <button class = "seats bg-slate-200 rounded-lg m-4 p-2 text-center" id = "A4">A4</button>
+        <button class = "seats bg-slate-200 rounded-lg m-4 p-2 text-center" id = "B1">B1</button>
+        <button class = "seats bg-slate-200 rounded-lg m-4 p-2 text-center" id = "B2">B2</button>
+        <button class = "seats bg-slate-200 rounded-lg m-4 p-2 text-center" id = "B3">B3</button>
+        <button class = "seats bg-slate-200 rounded-lg m-4 p-2 text-center" id = "B4">B4</button>
+        <button class = "seats bg-slate-200 rounded-lg m-4 p-2 text-center" id = "C1">C1</button>
+        <button class = "seats bg-slate-200 rounded-lg m-4 p-2 text-center" id = "C2">C2</button>
+        <button class = "seats bg-slate-200 rounded-lg m-4 p-2 text-center" id = "C3">C3</button>
+        <button class = "seats bg-slate-200 rounded-lg m-4 p-2 text-center" id = "C4">C4</button>
 
         <p id = "selected">Selected seats</p>
     </div>

diff --git a/script.js b/script.js
@@ -11,22 +11,31 @@ document.getElementById('inputfield').addEventListener('keyup',function(event){
     else{
         document.getElementById('delete-btn').setAttribute('disabled','true');
     }
-    console.log(event.target.value);
+    // console.log(event.target.value);
 })
 
 allSeats.forEach(seats =>
     seats.addEventListener('click',() =>{
         const seat = document.getElementById(seats.id);
-        console.log(seat.id);
 
-        if(seat.classList.contains('bg-slate-200')){
-            seat.classList.remove('bg-slate-200');
-            seat.classList.add('bg-green-500','text-white');
-            ++count;
-
-            const newSeat = document.createElement('p');
-            newSeat.innerText = `You have selected ${seat.id}`;
-            document.getElementById('selected').appendChild(newSeat);
+        if(count < 4){
+            if(seat.classList.contains('bg-slate-200')){
+                seat.classList.remove('bg-slate-200');
+                seat.classList.add('bg-green-500','text-white');
+                ++count;
+                console.log(count);
+
+                const newSeat = document.createElement('p');
+                newSeat.innerText = `You have selected ${seat.id}`;
+                document.getElementById('selected').appendChild(newSeat);
+
+                let seatsLeft = parseInt(document.getElementById('remaining').innerText);
+                seatsLeft --;
+                document.getElementById('remaining').innerText = seatsLeft;
+            }
+        }
+        else{
+            alert("You can't book more than 4 seats");
         }
     })
 )