Skip to content

Commit 270bd4b

Browse files
wesboswesbos
committed
Jokes
1 parent 8b725cc commit 270bd4b

File tree

9 files changed

+13276
-0
lines changed

9 files changed

+13276
-0
lines changed

‎exercises/73 - CORS and Recipes/index.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/73 - CORS and Recipes/package-lock.json‎

Lines changed: 6493 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎exercises/73 - CORS and Recipes/package.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "dogrecipes",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "scripts.js",
6+
"scripts": {
7+
"start": "parcel index.html"
8+
},
9+
"author": "",
10+
"license": "ISC",
11+
"dependencies": {
12+
"parcel-bundler": "^1.12.4"
13+
},
14+
"browserslist": [
15+
"last 1 chrome versions"
16+
]
17+
}

‎exercises/73 - CORS and Recipes/scripts.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/74 - Dad Jokes /index.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
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>Dad Jokes</title>
8+
<link rel="stylesheet" href="../../base.css">
9+
<style>
10+
html {
11+
--size: 20px;
12+
}
13+
14+
.wrapper {
15+
text-align: center;
16+
}
17+
18+
.joke {
19+
font-size: 5rem;
20+
font-weight: 900;
21+
}
22+
23+
.lds-ripple {
24+
display: inline-block;
25+
position: relative;
26+
27+
width: var(--size);
28+
height: var(--size);
29+
}
30+
31+
.lds-ripple div {
32+
position: absolute;
33+
border: 4px solid white;
34+
opacity: 1;
35+
border-radius: 50%;
36+
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
37+
}
38+
39+
.lds-ripple div:nth-child(2) {
40+
animation-delay: -0.5s;
41+
}
42+
43+
@keyframes lds-ripple {
44+
0% {
45+
top: calc(var(--size) / 2);
46+
left: calc(var(--size) / 2);
47+
width: 0;
48+
height: 0;
49+
opacity: 1;
50+
}
51+
52+
100% {
53+
top: 0px;
54+
left: 0px;
55+
width: calc(var(--size) * 0.9);
56+
height: calc(var(--size) * 0.9);
57+
opacity: 0;
58+
}
59+
}
60+
61+
.hidden {
62+
display: none;
63+
}
64+
</style>
65+
</head>
66+
67+
<body>
68+
<div class="wrapper">
69+
<div class="joke">
70+
<p>Dad Jokes.</p>
71+
</div>
72+
<button class="getJoke">
73+
<span class="jokeText">Get A Joke</span>
74+
<div class="lds-ripple loader hidden">
75+
<div></div>
76+
<div></div>
77+
</div>
78+
</button>
79+
</div>
80+
81+
<script src="./jokes.js"></script>
82+
</body>
83+
84+
</html>

‎exercises/74 - Dad Jokes /jokes-FINISHED.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
const jokeButton = document.querySelector('.getJoke');
2+
const jokeButtonSpan = jokeButton.querySelector('.jokeText');
3+
const jokeHolder = document.querySelector('.joke p');
4+
const loader = document.querySelector('.loader');
5+
6+
const buttonText = [
7+
'Ugh.',
8+
'🤦🏻‍♂️',
9+
'omg dad.',
10+
'you are the worst',
11+
'seriously',
12+
'stop it.',
13+
'please stop',
14+
'that was the worst one',
15+
];
16+
17+
async function fetchJoke() {
18+
// turn loader on
19+
loader.classList.remove('hidden');
20+
const response = await fetch('https://icanhazdadjoke.com', {
21+
headers: {
22+
Accept: 'application/json',
23+
},
24+
});
25+
const data = await response.json();
26+
// turn the loader off
27+
loader.classList.add('hidden');
28+
return data;
29+
}
30+
31+
function randomItemFromArray(arr, not) {
32+
const item = arr[Math.floor(Math.random() * arr.length)];
33+
if (item === not) {
34+
console.log('Ahh we used that one last time, look again');
35+
return randomItemFromArray(arr, not);
36+
}
37+
return item;
38+
}
39+
40+
async function handleClick() {
41+
const { joke } = await fetchJoke();
42+
jokeHolder.textContent = joke;
43+
jokeButtonSpan.textContent = randomItemFromArray(
44+
buttonText,
45+
jokeButtonSpan.textContent
46+
);
47+
}
48+
49+
jokeButton.addEventListener('click', handleClick);

‎exercises/74 - Dad Jokes /jokes.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const buttonText = [
2+
'Ugh.',
3+
'🤦🏻‍♂️',
4+
'omg dad.',
5+
'you are the worst',
6+
'seriously',
7+
'stop it.',
8+
'please stop',
9+
'that was the worst one',
10+
];

‎playground/apis-FINISHED.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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>APIs</title>
8+
<link rel="stylesheet" href="../base.css">
9+
</head>
10+
11+
<body>
12+
<p class="user"></p>
13+
14+
<script>
15+
const baseEndpoint = 'https://api.github.com';
16+
const usersEndpoint = `${baseEndpoint}/users`;
17+
const userEl = document.querySelector('.user');
18+
19+
async function displayUser(username) {
20+
userEl.textContent = 'loading...';
21+
const response = await fetch(`${usersEndpoint}/${username}`);
22+
const data = await response.json();
23+
console.log(data);
24+
console.log(data.blog);
25+
console.log(data.name);
26+
console.log(data.location);
27+
userEl.textContent = `${data.name} - ${data.blog}`;
28+
}
29+
30+
function handleError(err) {
31+
console.log('OH NO!');
32+
console.log(err);
33+
userEl.textContent = `Something went wrong: ${err}`
34+
}
35+
36+
displayUser('stolinski').catch(handleError);
37+
38+
</script>
39+
</body>
40+
41+
</html>

0 commit comments

Comments
 (0)