Skip to content

Commit 0fb5e80

Browse files
gixxerbladegixxerblade
committed
completed assignment for async/await
1 parent 2e2a109 commit 0fb5e80

File tree

4 files changed

+113
-27
lines changed

4 files changed

+113
-27
lines changed

‎weekSeven/async_await/images/pickle.jpg

255 KB
Loading

‎weekSeven/async_await/index.html

+2-3
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,11 @@
99
href="https://fonts.googleapis.com/css?family=Poppins&display=swap"
1010
rel="stylesheet"
1111
/>
12-
<script src="https://developer.edamam.com/attribution/badge.js"></script>
1312
<title>Document</title>
1413
</head>
1514
<body>
1615
<div id="container">
17-
<h1>Pickles</h1>
16+
<h1>Pickle Recipes</h1>
1817
<div id="intro">
1918
Pickling is the process of preserving or extending the lifespan of food
2019
by either anaerobic fermentation in brine or immersion in vinegar. In
@@ -24,8 +23,8 @@ <h1>Pickles</h1>
2423
prevent ambiguity, prefaced with pickled. Foods that are pickled include
2524
vegetables, fruits, meats, fish, dairy and eggs. Here are some cool recipes:
2625
</div>
26+
<div id="card-container"></div>
2727
</div>
28-
<div id="edamam-badge" data-color="white"></div>
2928
<script src="script.js"></script>
3029
</body>
3130
</html>

‎weekSeven/async_await/script.js

+54-12
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,59 @@
1-
//const container = document.getElementById('container');
2-
const api_id = '95e7fbbf';
3-
const app_key = '22f72d0ac69dde30ee5707e75f4e7b8d';
4-
const q = 'pickles';
5-
const url = 'https://api.edamam.com/search?q=${pickles}&app_id=${api_id}&app_key=${app_key}';
1+
const cardContainer = document.getElementById('card-container');
2+
const container = document.getElementById("container");
3+
/* const api_id = "95e7fbbf";
4+
const app_key = "22f72d0ac69dde30ee5707e75f4e7b8d"; */
5+
const q = "q=pickles";
6+
const cors = "https://yacdn.org/proxy/";
7+
const url = "http://www.recipepuppy.com/api/?";
8+
const page = "&p=" + Math.floor(Math.random() * 10);
69

710
//Fetch the JSON object
8-
const getRecipes = async () =>{
9-
const response = await fetch(url);
11+
const getRecipes = async () => {
12+
const response = await fetch(`${cors}${url}${q}${page}`);
1013
const data = await response.json();
11-
for(let i = 0; i < data.hits.length; i++){
12-
console.log(data.hits[i]);
13-
}
14+
//const dataObj = JSON.parse(data);
15+
for (let i = 0; i < data.results.length; i++) {
16+
//console.log(data.results[i]);
17+
let title = document.createElement("h3");
18+
title.setAttribute("id", "title");
19+
title.appendChild(document.createTextNode(data.results[i]["title"]));
20+
//console.log(data.results[i]["title"]);
21+
22+
let image = new Image();
23+
if (data.results[i]["thumbnail"] == "") {
24+
image.src = "images/pickle.jpg";
25+
image.setAttribute("id", "defaultImage");
26+
} else {
27+
image.src = data.results[i]["thumbnail"];
28+
image.setAttribute("id", "image");
29+
}
30+
31+
//console.log(data.results[i]["thumbnail"]);
32+
33+
let recipe = document.createElement("p");
34+
recipe.setAttribute("id", "recipe");
35+
let ingredients = data.results[i]["ingredients"].toUpperCase();
36+
recipe.appendChild(document.createTextNode(ingredients));
37+
console.log(data.results[i]["ingredients"]);
1438

15-
}
39+
let href = document.createElement("a");
40+
let link = data.results[i]["href"]
41+
href.setAttribute("href", `${link}`);
42+
href.appendChild(document.createTextNode(data.results[i]["href"]));
43+
console.log(data.results[i]["href"]);
44+
45+
let cardElement = document.createElement("div");
46+
cardElement.setAttribute("id", "card");
47+
cardElement.appendChild(title);
48+
cardElement.appendChild(image);
49+
cardElement.appendChild(recipe);
50+
cardElement.appendChild(href);
51+
52+
cardContainer.appendChild(cardElement);
53+
}
54+
};
1655

17-
getRecipes();
56+
getRecipes().catch(error => {
57+
console.log("Error retrieving results");
58+
console.error(error);
59+
});

‎weekSeven/async_await/style.css

+57-12
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,57 @@
1-
*{
2-
margin: 0;
3-
padding: 0;
4-
box-sizing: border-box;
5-
}
6-
body{
7-
width: 100%;
8-
height: 100vh;
9-
font-size: 16px;
10-
font-family: 'Poppins', sans-serif;
11-
background: #eafbea;
12-
}
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
body {
7+
width: 100vw;
8+
height: 100vh;
9+
font-size: 16px;
10+
font-family: "Poppins", sans-serif;
11+
background: #eafbea;
12+
text-align: center;
13+
display: flex;
14+
}
15+
#container {
16+
display: flex;
17+
flex-flow: column wrap;
18+
align-items: center;
19+
justify-content: center;
20+
width: 75%;
21+
margin: auto;
22+
}
23+
h1 {
24+
width: 100%;
25+
font-size: 3em;
26+
padding: 10px;
27+
text-align: center;
28+
align-self: center;
29+
}
30+
#defaultImage {
31+
width: 107px;
32+
}
33+
#intro {
34+
width: 65%;
35+
text-align: center;
36+
font-size: 1.2em;
37+
}
38+
#card-container {
39+
width: 100%;
40+
display: grid;
41+
grid-template-columns: .6fr .6fr;
42+
gap: 10px;
43+
44+
}
45+
#card {
46+
display: flex;
47+
flex-flow: column wrap;
48+
justify-content: center;
49+
align-items: center;
50+
text-align: center;
51+
background: white;
52+
width: 100%;
53+
padding: 5px;
54+
border-radius: 10px;
55+
margin: 5px;
56+
box-shadow: 5px 5px 20px gray;
57+
}

0 commit comments

Comments
 (0)