| <!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> |
