diff --git a/index.html b/index.html
new file mode 100644
index 0000000..048cc8b
--- /dev/null
+++ 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:wght@200..800&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>
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..178f64a
--- /dev/null
+++ 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
new file mode 100644
index 0000000..5b072de
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: ["./src/**/*.{html,js}"],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+ }
\ No newline at end of file