This repository has been archived by the owner on Oct 2, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·91 lines (85 loc) · 3.69 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JSON (JavaScript Object Notation) | COMP1073 Client-Side JavaScript</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css/normalize.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- STEP 1: Build out a HEADER and a SECTION element -->
<header></header>
<section></section>
<script>
/* STEP 2: Bind the HEADER and the SECTION elements above to variables */
const header = document.querySelector("header");
const section = document.querySelector("section");
/* STEP 3: Store the URL of a JSON file in a variable */
let requestURL = "https://csc530.github.io/lesson/js/i-scream.json";
console.log(requestURL);
/* STEP 4: Create a new XHR object */
let request = new XMLHttpRequest();
/* STEP 5: Open a new request using the request() method */
request.open("GET", requestURL)
/* STEP 6: Set JavaScript to accept JSON from the server */
request.responseType = "json";
/* STEP 7: Send the request with the send() method */
request.send();
/* STEP 8: Add an event handler that listens for the onload event of the JSON file/object */
request.onload = function () {
let iScreamInc = request.response;
console.log(iScreamInc);
populateHeader(iScreamInc);
showTopFlavours(iScreamInc);
}
/* STEP 9: Build out the populateHeader() function */
function populateHeader(jsonObj) {
let headerH1 = document.createElement("h1");
headerH1.textContent = jsonObj["companyName"];
header.appendChild(headerH1);
}
/* STEP 10a: Assemble the showTopFlavors() function */
function showTopFlavours(jsonObj) {
// STEP 10b: Bind the JSON topFlavors object to a var
let topFlavours = jsonObj.topFlavors;
// STEP 10c: Loop through the topFlavors object
for(let i = 0; i < topFlavours.length; i++) {
// STEP 10d: build HTML elements for the content
const article = document.createElement("article");
const h2 = document.createElement("h2");
const img = document.createElement("img");
const p1 = document.createElement("p");
const p2 = document.createElement("p");
const list = document.createElement("ul");
// STEP 10e: Set the textContent property for each of the above elements (except the UL), based on the JSON content
h2.textContent = topFlavours[i].name;
img.setAttribute("src", "images/" + topFlavours[i].image);
p1.textContent = "dessert type: " + topFlavours[i]["type"];
p2["textContent"] = "calories: " + topFlavours[i]["calories"];
// STEP 10f: Build a loop for the ingredients array in the JSON
let ingredients = topFlavours[i]["ingredients"];
for(let j = 0; j < ingredients.length; j++)
{
let listItem = document.createElement("li");
listItem.textContent = ingredients[j];
//add ingredient to the ul
list.appendChild(listItem);
}
// STEP 10g: Append each of the above HTML elements to the ARTICLE element
article.appendChild(h2);
article.appendChild(img);
article.appendChild(p1);
article.appendChild(p2);
article.appendChild(list);
// STEP 10h: Append each complete ARTICLE element to the SECTION element
section.appendChild(article);
}
}
/* STEP 11: Change the URL in step 3 to point to the JSON file in the local /js folder */
// STEP 12: Add a 3rd flavour of ice cream to the local JSON file, making use of the /images/strawberry-sprinkle.svg image
// This page inspired by and adapted from https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON
// A special thanks to https://openclipart.org/detail/285225/ice-cream-cones for the awesome ice cream cone illustrations
</script>
</body>
</html>