generated from cs1300-2022/cs1300-html-css-js-students
-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
74 lines (62 loc) · 2.63 KB
/
app.js
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
// Make a GET request to the fruityvice api to retrieve some fruit data
const apiRequest = async () => {
const BASE_URL = "https://www.fruityvice.com/api/";
// This endpoint (https://www.fruityvice.com/doc/index.html#api-GET-getAll) returns a list of all the fruits and their info, feel free to play around with different endpoints!
const resourcePath = "fruit/all";
// Making a fetch request to an API endpoint
// Note: a fetch request is an asynchronous operation, and `await` tells the program to wait until the request has been completed before continuing
const endpoint = BASE_URL + resourcePath;
const response = await fetch(buildProxyEndpoint(endpoint), {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
// console.log(response);
// Return the response in JSON format
return response.json();
};
const updatePage = async () => {
const gallery = document.getElementById("fruit-gallery");
// Make API request and get an array of fruit objects
const fruitsArray = await apiRequest();
console.log(fruitsArray);
// TODO: Use either `map` and/or `filter` to extract some data from the array of fruit objects
// For example, find "name of all fruits whose sugar > 15",
// TODO: Create a new HTML element to display your data
fruitsArray
.sort((a, b) => b.nutritions.calories - a.nutritions.calories)
.map((fruit, ind) => {
const calories = fruit.nutritions.calories;
if (calories > 50) {
const newElement = document.createElement("div");
newElement.className = "fruit-data";
newElement.innerHTML =
"<h4>" +
(ind + 1) +
". " +
fruit.name +
"</h4><div>Calories: " +
calories +
"</div>";
gallery.append(newElement);
}
});
// TODO: Append your new element to the page
};
// SAMPLE CODE of how to create and append a new HTML element to the page
const exampleAddElement = () => {
// Create a new HTML element and set its properties
const newElement = document.createElement("div");
newElement.innerHTML = "this text is inside a div";
// Append the new element to an existing part of the webpage
const existingElement = document.getElementById("example-id");
existingElement.append(newElement);
};
/**
* To access information in this API, we need to send our requests through a proxy due to CORS restrictions.
* This will be used as our proxy to avoid CORS issues.
*/
// do not touch - stencil code to add the proxy to avoid CORS
const PROXY_URL = "https://cs1300-cors-anywhere.herokuapp.com/";
const buildProxyEndpoint = (endpoint) => `${PROXY_URL}${endpoint}`;