seat selection done

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

Hide file tree

Showing 3 changed files with 86 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Book My Seat</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <style>
+        *{
+            font-family: manrope;
+        }
+    </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>
+
+    <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>
+
+        <p id = "selected">Selected seats</p>
+    </div>
+
+    <div class="border-2 w-96 p-2  rounded-lg">
+        <input type="text" id = "inputfield" class="p-2 mr-12 rounded-xl" placeholder="Give input">
+        <button id = "delete-btn" onclick="run()" disabled class="disabled:opacity-25  rounded-xl px-8 py-2 bg-green-500 font-bold text-white">Apply</button> 
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,33 @@
+let count = 0 , remaining = 40;
+const allSeats = document.querySelectorAll('.seats');
+
+document.getElementById('inputfield').addEventListener('keyup',function(event){
+    if(event.target.value == 'NEW15'){
+        document.getElementById('delete-btn').removeAttribute('disabled');
+
+    }else if(event.target.value == 'Couple 20'){
+        document.getElementById('delete-btn').removeAttribute('disabled');
+    }
+    else{
+        document.getElementById('delete-btn').setAttribute('disabled','true');
+    }
+    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);
+        }
+    })
+)
+
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ["./src/**/*.{html,js}"],
+    theme: {
+      extend: {},
+    },
+    plugins: [],
+  }