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