Skip to content

Commit 4692477

Browse files
jwoolbright23jwoolbright23
authored
Merge pull request LaunchCodeEducation#27 from LaunchCodeEducation/chapter-27-fetch
Chapter 27 fetch
2 parents e9ee479 + c701868 commit 4692477

File tree

6 files changed

+110
-0
lines changed

6 files changed

+110
-0
lines changed

‎fetch/chapter-examples/fetching-data/fetch-weather-part-1.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Launch Status</title>
6+
<script>
7+
window.addEventListener("load", function() {
8+
fetch("https://handlers.education.launchcode.org/static/weather.json").then( function(response) {
9+
console.log(response);
10+
} );
11+
});
12+
</script>
13+
</head>
14+
<body>
15+
<h1>Launch Status</h1>
16+
Weather Conditions
17+
<div id="weather-conditions">
18+
<!-- TODO: dynamically add html about weather using data from API -->
19+
</div>
20+
</body>
21+
</html>

‎fetch/chapter-examples/fetching-data/fetch-weather-part-2.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Launch Status</title>
6+
<script>
7+
window.addEventListener("load", function() {
8+
fetch("https://handlers.education.launchcode.org/static/weather.json").then( function(response) {
9+
// Access the JSON in the response
10+
response.json().then( function(json) {
11+
console.log(json);
12+
});
13+
});
14+
});
15+
</script>
16+
</head>
17+
<body>
18+
<h1>Launch Status</h1>
19+
Weather Conditions
20+
<div id="weather-conditions">
21+
<!-- TODO: dynamically add html about weather using data from API -->
22+
</div>
23+
</body>
24+
</html>

‎fetch/chapter-examples/fetching-data/fetch-weather-part-3.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Launch Status</title>
6+
<script>
7+
window.addEventListener("load", function() {
8+
fetch("https://handlers.education.launchcode.org/static/weather.json").then( function(response) {
9+
// Access the JSON in the response
10+
response.json().then( function(json) {
11+
const div = document.getElementById('weather-conditions');
12+
div.innerHTML = `
13+
<ul>
14+
<li>Temp ${json.temp}</li>
15+
<li>Wind Speed ${json.windSpeed}</li>
16+
<li>Status ${json.status}</li>
17+
<li>Chance of Precip ${json.chanceOfPrecipitation}</li>
18+
</ul>
19+
`;
20+
});
21+
});
22+
});
23+
</script>
24+
</head>
25+
<body>
26+
<h1>Launch Status</h1>
27+
Weather Conditions
28+
<div id="weather-conditions">
29+
<!-- TODO: dynamically add html about weather using data from API -->
30+
</div>
31+
</body>
32+
</html>

‎fetch/studio/index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width">
6+
<title>Astronauts</title>
7+
<link href="style.css" rel="stylesheet" type="text/css" />
8+
</head>
9+
<body>
10+
<script src="script.js"></script>
11+
<h1>Astronauts</h1>
12+
<div id="container">
13+
<!-- List of astronauts will be added here dynamically -->
14+
</div>
15+
</body>
16+
</html>

‎fetch/studio/script.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
//TODO: Add Your Code Below

‎fetch/studio/style.css

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.avatar {
2+
border-radius: 50%;
3+
height: 100px;
4+
float:right;
5+
}
6+
7+
.astronaut {
8+
border: 1px solid black;
9+
display: flex;
10+
justify-content: space-between;
11+
width: 500px;
12+
align-items: center;
13+
padding: 5px;
14+
margin-bottom: 20px;
15+
border-radius: 6px;
16+
}

0 commit comments

Comments
 (0)