Skip to content

Commit f6c9cda

Browse files
Charlene TranCharlene Tran
Charlene Tran
authored and
Charlene Tran
committed
added duplicate for CT-edit
1 parent abe3d79 commit f6c9cda

File tree

6 files changed

+141
-0
lines changed

6 files changed

+141
-0
lines changed

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

Lines changed: 21 additions & 0 deletions
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-CT/fetching-data/fetch-weather-part-2.html

Lines changed: 24 additions & 0 deletions
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-CT/fetching-data/fetch-weather-part-3.html

Lines changed: 32 additions & 0 deletions
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-CT/index.html

Lines changed: 16 additions & 0 deletions
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-CT/script.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
//TODO: Add Your Code Below
2+
window.addEventListener("load", function () {
3+
fetch("https://handlers.education.launchcode.org/static/astronauts.json").then(function(response) {
4+
console.log(response);
5+
6+
//Access the JSON in the response
7+
const jsonPromise = response.json();
8+
9+
jsonPromise.then(function(json) {
10+
11+
// Checking that the JSON is pulled correctly
12+
console.log(json);
13+
14+
const container = document.getElementById("container");
15+
for (let i = 0; i < json.length; i++) {
16+
container.innerHTML += `
17+
<div class="astronaut">
18+
<div class="bio">
19+
<h3>${json[i].firstName} ${json[i].lastName}</h3>
20+
<ul>
21+
<li>Hours in space: ${json[i].hoursInSpace}</li>
22+
<li>Active: ${json[i].active}</li>
23+
<li>Skills: ${json[i].skills}</li>
24+
</ul>
25+
</div>
26+
<img class="avatar" src="${json[i].picture}">
27+
</div>
28+
`
29+
}
30+
});
31+
});
32+
});

‎fetch/studio-CT/style.css

Lines changed: 16 additions & 0 deletions
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)