Skip to content

Commit d1354e6

Browse files
AsjasAsjas
committed
create starter and finished files for video 75
1 parent d5d9055 commit d1354e6

File tree

4 files changed

+90
-61
lines changed

4 files changed

+90
-61
lines changed

‎exercises/75 - CORS and Recipes/index-FINISHED.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<title>Recipe Fetcher</title>
8+
<link rel="stylesheet" href="../../base.css">
9+
<style>
10+
.search {
11+
display: grid;
12+
grid-template-columns: 1fr;
13+
}
14+
15+
button[disabled] {
16+
opacity: 0.2;
17+
}
18+
19+
.recipes {
20+
display: grid;
21+
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
22+
grid-gap: 20px;
23+
}
24+
25+
.recipe {
26+
border: 1px solid rgba(0, 0, 0, 0.1);
27+
padding: 20px;
28+
}
29+
</style>
30+
</head>
31+
32+
<body>
33+
<div class="wrapper">
34+
<form class="search" autocomplete="off">
35+
<input type="text" name="query" value="pizza">
36+
<button name="submit" type="submit">Submit</button>
37+
</form>
38+
<div class="recipes"></div>
39+
</div>
40+
41+
<script src="./scripts.js"></script>
42+
</body>
43+
44+
</html>

‎exercises/75 - CORS and Recipes/index.html‎

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,28 +11,13 @@
1111
display: grid;
1212
grid-template-columns: 1fr;
1313
}
14-
15-
button[disabled] {
16-
opacity: 0.2;
17-
}
18-
19-
.recipes {
20-
display: grid;
21-
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
22-
grid-gap: 20px;
23-
}
24-
25-
.recipe {
26-
border: 1px solid rgba(0, 0, 0, 0.1);
27-
padding: 20px;
28-
}
2914
</style>
3015
</head>
3116

3217
<body>
3318
<div class="wrapper">
3419
<form class="search" autocomplete="off">
35-
<input type="text" name="query" value="pizza">
20+
<input type="text" name="query">
3621
<button name="submit" type="submit">Submit</button>
3722
</form>
3823
<div class="recipes"></div>

‎exercises/75 - CORS and Recipes/scripts-FINISHED.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
const baseEndpoint = 'http://www.recipepuppy.com/api';
2+
const proxy = `https://cors-anywhere.herokuapp.com/`;
3+
const form = document.querySelector('form.search');
4+
const recipesGrid = document.querySelector('.recipes');
5+
6+
async function fetchRecipes(query) {
7+
const res = await fetch(`${proxy}${baseEndpoint}?q=${query}`);
8+
const data = await res.json();
9+
return data;
10+
}
11+
12+
async function handleSubmit(event) {
13+
event.preventDefault();
14+
const el = event.currentTarget;
15+
console.log(form.query.value);
16+
fetchAndDisplay(form.query.value);
17+
}
18+
19+
async function fetchAndDisplay(query) {
20+
// turn the form off
21+
form.submit.disabled = true;
22+
// submit the search
23+
const recipes = await fetchRecipes(query);
24+
console.log(recipes);
25+
form.submit.disabled = false;
26+
displayRecipes(recipes.results);
27+
}
28+
29+
function displayRecipes(recipes) {
30+
console.log('Creating HTML');
31+
const html = recipes.map(
32+
recipe => `<div class="recipe">
33+
<h2>${recipe.title}</h2>
34+
<p>${recipe.ingredients}</p>
35+
${recipe.thumbnail &&
36+
`<img src="${recipe.thumbnail}" alt="${recipe.title}"/>`}
37+
<a href="${recipe.href}">View Recipe →</a>
38+
</div>`
39+
);
40+
recipesGrid.innerHTML = html.join('');
41+
}
42+
43+
form.addEventListener('submit', handleSubmit);
44+
// on page load run it with pizza
45+
fetchAndDisplay('pizza');

‎exercises/75 - CORS and Recipes/scripts.js‎

Lines changed: 0 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +0,0 @@
1-
const baseEndpoint = 'http://www.recipepuppy.com/api';
2-
const proxy = `https://cors-anywhere.herokuapp.com/`;
3-
const form = document.querySelector('form.search');
4-
const recipesGrid = document.querySelector('.recipes');
5-
6-
async function fetchRecipes(query) {
7-
const res = await fetch(`${proxy}${baseEndpoint}?q=${query}`);
8-
const data = await res.json();
9-
return data;
10-
}
11-
12-
async function handleSubmit(event) {
13-
event.preventDefault();
14-
const el = event.currentTarget;
15-
console.log(form.query.value);
16-
fetchAndDisplay(form.query.value);
17-
}
18-
19-
async function fetchAndDisplay(query) {
20-
// turn the form off
21-
form.submit.disabled = true;
22-
// submit the search
23-
const recipes = await fetchRecipes(query);
24-
console.log(recipes);
25-
form.submit.disabled = false;
26-
displayRecipes(recipes.results);
27-
}
28-
29-
function displayRecipes(recipes) {
30-
console.log('Creating HTML');
31-
const html = recipes.map(
32-
recipe => `<div class="recipe">
33-
<h2>${recipe.title}</h2>
34-
<p>${recipe.ingredients}</p>
35-
${recipe.thumbnail &&
36-
`<img src="${recipe.thumbnail}" alt="${recipe.title}"/>`}
37-
<a href="${recipe.href}">View Recipe →</a>
38-
</div>`
39-
);
40-
recipesGrid.innerHTML = html.join('');
41-
}
42-
43-
form.addEventListener('submit', handleSubmit);
44-
// on page load run it with pizza
45-
fetchAndDisplay('pizza');

0 commit comments

Comments
 (0)