|
<!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()"> |
|
|
|
|
|
|
|
|
|
<div id="result"></div> |
|
<script> |
|
function fetchData() { |
|
const day = document.getElementById("day").value; |
|
const dataSelect = document.getElementById("data"); |
|
const resultDiv = document.getElementById("result"); |
|
|
|
|
|
resultDiv.innerHTML = ""; |
|
|
|
|
|
fetch(`https://api.example.com/data/${day}`) |
|
.then(response => response.json()) |
|
.then(data => { |
|
|
|
dataSelect.innerHTML = ""; |
|
data.forEach(item => { |
|
const option = document.createElement("option"); |
|
option.value = item.value; |
|
option.textContent = item.label; |
|
dataSelect.appendChild(option); |
|
}); |
|
|
|
|
|
resultDiv.innerHTML = `Data for ${day}: ${JSON.stringify(data)}`; |
|
}) |
|
.catch(error => { |
|
console.error(error); |
|
resultDiv.innerHTML = "Error fetching data."; |
|
}); |
|
} |
|
|
|
</script> |
|
</body> |
|
</html> |
