Spaces:
Running
Running
| <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> |