customer information section added

khalid586 · Feb 20, 2024 · 0508cef · 0508cef
1 parent fb81468
commit 0508cef
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -241,7 +241,7 @@ <h1 class="text-4xl font-extrabold mb-8 text-[#1DD100]">Book My Seat</h1>
 
         <div class="rightOne lg:py-8 lg:px-16 mx-4 mt-4">
             <p class="text-center font-extrabold text-4xl pb-8 pt-4">Seat Information</p>
-            <div class="lg:py-8 lg:my-16 p-4 lg:px-8 rounded-xl bg-slate-50">
+            <div class="lg:py-8  p-4 lg:px-8 rounded-xl bg-slate-50">
                 <div class="flex justify-between font-bold text-xl">
                         <p>Seat <sup id = "seatTaken" class="bg-[#1DD100] text-white px-1 rounded-full">0</sup></p>
                         <p>Class</p>
@@ -273,7 +273,17 @@ <h1 class="text-4xl font-extrabold mb-8 text-[#1DD100]">Book My Seat</h1>
 
             </div>
 
-            <div class=" text-center my-8">
+            <!-- <p class="text-center lg:mt-8 font-extrabold text-2xl pb-8 pt-4">Passenger Information</p> -->
+
+            <p class="font-bold text-xl mt-12 ">Passenger Name*</p>
+                <input class="rounded-xl mt-2 w-full" type="text" id = "passenger_name" placeholder="Enter your name">
+            <p class="font-bold text-xl mt-6">Passenger Phone*</p>
+                <input class="rounded-xl mt-2 w-full" type="number" id = "passenger_phone" placeholder="Enter your phone number">
+
+            <p class="mt-4">Thanks <span id = "name_text" class="font-bold text-green-500"></span> for choosing us</p>
+
+            <div class=" text-center lg:my-16 my-8">
+                <p class="text-sm text-gray-500 mb-3">Select a seat , provide your name and phone number(11 digit) to confirm</p>
                 <button class="bg-[#1DD100] px-16 py-4 m-auto disabled:opacity-30 rounded-xl text-white" disabled id = "confirmation" data-modal-target="popup-modal" data-modal-toggle="popup-modal" >Confirm</button>
             </div>
         </div>

diff --git a/script.js b/script.js
@@ -3,11 +3,39 @@ const allSeats = document.querySelectorAll('.seats');
 
 
 let confirmed = false, grandTotal = 0;
+let name = '' , phone = '1';
+
+
+
+function check(){
+
+    if(name.length && phone.length == 11 && count){
+        document.getElementById('confirmation').removeAttribute('disabled');
+    }else{
+        document.getElementById('confirmation').setAttribute('disabled','true');
+    }
+}
+
+document.getElementById('passenger_name').addEventListener('keyup',(event)=>{
+    name = event.target.value;
+    check();
+    document.getElementById('name_text').innerText = name;
+})
+document.getElementById('passenger_phone').addEventListener('keyup',(event)=>{
+    phone = event.target.value;
+    check();
+
+    // if(typeof phone != 'number'){
+    //     alert('Provide a valid phone number!')
+    // }
+})
+
 
 document.getElementById('confirmation').addEventListener('click', () => {
     confirmed = true;
     document.getElementById('coupon-btn').setAttribute('disabled','true');
     document.getElementById('confirmation').setAttribute('disabled','true');
+
 })
 
 allSeats.forEach(seats =>
@@ -30,8 +58,10 @@ allSeats.forEach(seats =>
                 document.getElementById('seatTaken').innerText = count;
 
                 document.getElementById('coupon-btn').removeAttribute('disabled');
-                document.getElementById('confirmation').removeAttribute('disabled');
+                // document.getElementById('confirmation').removeAttribute('disabled');
 
+                check();
+
                 const newSeat = document.createElement('div');
                 newSeat.classList.add('flex','justify-between');
                 newSeat.setAttribute('id',`${seats.id}-info`) ;
@@ -63,6 +93,7 @@ allSeats.forEach(seats =>
                 document.getElementById('coupon-btn').setAttribute('disabled','true');
                 document.getElementById('confirmation').setAttribute('disabled','true');
             }
+            check();
 
             let seatsLeft = parseInt(document.getElementById('remaining').innerText);
             seatsLeft++;