<!DOCTYPE html>
<html>
<head>
<title>API Demo</title>
</head>
<body>
<h1>API Demo</h1>
<label for="day">Select a day:</label>
<select id="day">
<option value="monday">Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday">Wednesday</option>
<option value="thursday">Thursday</option>
<option value="friday">Friday</option>
<option value="saturday">Saturday</option>
<option value="sunday">Sunday</option>
</select>
<label for="data">Select data:</label>
<select id="data" name="data"></select>
<br><br>
<input type="button" value="Submit" onclick="fetchData()">
<!-- <br><br>
<button onclick="fetchAPI()">Submit</button>
<br><br> -->
<div id="result"></div>
<script>
function fetchData() {
const day = document.getElementById("day").value;
const dataSelect = document.getElementById("data");
const resultDiv = document.getElementById("result");
// Clear previous results
resultDiv.innerHTML = "";
// Make API request
fetch(`https://api.example.com/data/${day}`)
.then(response => response.json())
.then(data => {
// Populate data dropdown
dataSelect.innerHTML = "";
data.forEach(item => {
const option = document.createElement("option");
option.value = item.value;
option.textContent = item.label;
dataSelect.appendChild(option);
});
// Show fetched data
resultDiv.innerHTML = `Data for ${day}: ${JSON.stringify(data)}`;
})
.catch(error => {
console.error(error);
resultDiv.innerHTML = "Error fetching data.";
});
}
</script>
</body>
</html>