27.1. Fetching Data
Tue Aug 30 2022 18:32:43 GMT+0000 (Coordinated Universal Time)
Saved by
@cruz
#javascript
<html>
<head>
<title>Launch Status</title>
<script>
window.addEventListener("load", function() {
fetch("https://handlers.education.launchcode.org/static/weather.json").then( function(response) {
response.json().then( function(json) {
const div = document.getElementById("weather-conditions");
// Add HTML that includes the JSON data
div.innerHTML = `
<ul>
<li>Temp ${json.temp}</li>
<li>Wind Speed ${json.windSpeed}</li>
<li>Status ${json.status}</li>
<li>Chance of Precip ${json.chanceOfPrecipitation}</li>
</ul>
`;
});
});
});
</script>
</head>
<body>
<h1>Launch Status</h1>
<h3>Weather Conditions</h3>
<div id="weather-conditions">
<!-- Weather data is added here dynamically. -->
</div>
</body>
</html>
content_copyCOPY
https://education.launchcode.org/intro-to-professional-web-dev/chapters/fetch/fetch.html
Comments