<!DOCTYPE html>
<html>
<head>
<title>On-Call Schedule</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
</head>
<body>
<header style='height:100px ; background-color:red'>
</header>
<h1>On-Call Schedule</h1>
<form>
<div class='container-fluid'>
<div class='row'>
<div class='col-6'>
<label for="date">Date:</label>
<input class='form-control' type="date" id="date" name="date"><br><br>
</div>
</div>
<div class='row'>
<div class='col-6'>
<label for="start-time">Start Time:</label>
<input class='form-control' type="time" id="start-time" name="start-time"><br><br>
</div>
<div class='col-6'>
<label for="end-time">End Time:</label>
<input class='form-control' type="time" id="end-time" name="end-time"><br><br>
</div>
</div>
<div class='row'>
<div class='col-12'>
<input class='btn btn-primary' type="submit" value="Save">
</div>
</div>
</div>
</form>
<br>
<table class='table'>
<tr>
<th>Date</th>
<th>Start Time</th>
<th>End Time</th>
</tr>
<tr>
<td id="saved-date"></td>
<td id="saved-start"></td>
<td id="saved-end"></td>
</tr>
</table>
<script>
// Get the form
const form = document.querySelector('form');
// Get the table cells where we'll display the saved data
const savedDate = document.querySelector('#saved-date');
const savedStart = document.querySelector('#saved-start');
const savedEnd = document.querySelector('#saved-end');
// Add a submit event listener to the form
form.addEventListener('submit', e => {
// Prevent the form from submitting
e.preventDefault();
// Get the values from the form inputs
const date = document.querySelector('#date').value;
const start = document.querySelector('#start-time').value;
const end = document.querySelector('#end-time').value;
// Display the saved data in the table cells
savedDate.textContent = date;
savedStart.textContent = start;
savedEnd.textContent = end;
});
</script>
</body>
</html>
