<!DOCTYPE html>
<html>
<head>
<title>Room Reservation</title>
</head>
<body>
<h2>Room Reservation</h2>
<form id="bookingForm">
<input name="name" placeholder="Your Name" required><br><br>
<input name="room" placeholder="Room Name" required><br><br>
<input type="date" name="date" required><br><br>
<input type="time" name="startTime" required><br><br>
<input type="time" name="endTime" required><br><br>
<button type="submit">Book Room</button>
</form>
<p id="result"></p>
<script>
document.getElementById("bookingForm").addEventListener("submit", async (e) => {
e.preventDefault();
const form = e.target;
const data = Object.fromEntries(new FormData(form));
const res = await fetch("/api/book", {
method: "POST",
body: JSON.stringify(data)
});
const result = await res.json();
document.getElementById("result").innerText = result.status;
});
</script>
</body>
</html>