Skip to content

Commit 2c887a3

Browse files
john-smilgajohn-smilga
committed
21 - dad jokes added
1 parent 539f395 commit 2c887a3

17 files changed

Lines changed: 1011 additions & 13 deletions

File tree

‎20-filters/final/README.md‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
## Filters Project
2+
3+
#### HTML Structure
4+
5+
- section.products
6+
7+
- div.filters-container
8+
- div.products-container
9+
10+
- .filters-container
11+
12+
- form.input-form
13+
- input.search-input
14+
- h5(company)
15+
- article.companies
16+
- button.company-btn(temp values)
17+
18+
- .products-container
19+
- article.product
20+
- img.product-img.img (src from products.js)
21+
- footer
22+
- h5.product-name(name)
23+
- span.product-price(price)
24+
25+
#### Display Products
26+
27+
- import products
28+
- make a copy and assign to new variable (use let keyword)
29+
- select .products-container
30+
- setup a function displayProducts, iterate over products, display them
31+
32+
#### Filter Based On Text
33+
34+
- select form, input
35+
- listen for 'keyup' events on form
36+
- get input value
37+
- filter based on the input value
38+
- call displayProducts
39+
40+
```js
41+
// Text Filter
42+
43+
const form = document.querySelector('.input-form');
44+
const searchInput = document.querySelector('.search-input');
45+
46+
form.addEventListener('keyup', () => {
47+
// keyup - fired when key released
48+
const inputValue = searchInput.value;
49+
filteredProducts = products.filter((product) => {
50+
return product.title.toLowerCase().includes(inputValue);
51+
});
52+
displayProducts();
53+
});
54+
```
55+
56+
#### Empty Array
57+
58+
- displayProducts()
59+
- check length of filteredProducts
60+
- if list.length < 1
61+
- set productsContainer = some text
62+
63+
#### Display Filter Buttons
64+
65+
- select .companies
66+
- create function displayButtons
67+
- get only unique companies (set)
68+
- iterate over results
69+
- return button with data-id
70+
- set .companies innerHTML equal to result
71+
72+
#### Filter Based on Company
73+
74+
- add event listener on .companies
75+
- look for event.target
76+
- if contains .company-btn proceed
77+
- if 'all' return all products (copy)
78+
- else filter based on company value
79+
- set search value ''
80+
- call displayProducts

‎20-filters/starter/README.md‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
## Filters Project
2+
3+
#### HTML Structure
4+
5+
- section.products
6+
7+
- div.filters-container
8+
- div.products-container
9+
10+
- .filters-container
11+
12+
- form.input-form
13+
- input.search-input
14+
- h5(company)
15+
- article.companies
16+
- button.company-btn(temp values)
17+
18+
- .products-container
19+
- article.product
20+
- img.product-img.img (src from products.js)
21+
- footer
22+
- h5.product-name(name)
23+
- span.product-price(price)
24+
25+
#### Display Products
26+
27+
- import products
28+
- make a copy and assign to new variable (use let keyword)
29+
- select .products-container
30+
- setup a function displayProducts, iterate over products, display them
31+
32+
#### Filter Based On Text
33+
34+
- select form, input
35+
- listen for 'keyup' events on form
36+
- get input value
37+
- filter based on the input value
38+
- call displayProducts
39+
40+
```js
41+
// Text Filter
42+
43+
const form = document.querySelector('.input-form');
44+
const searchInput = document.querySelector('.search-input');
45+
46+
form.addEventListener('keyup', () => {
47+
// keyup - fired when key released
48+
const inputValue = searchInput.value;
49+
filteredProducts = products.filter((product) => {
50+
return product.title.toLowerCase().includes(inputValue);
51+
});
52+
displayProducts();
53+
});
54+
```
55+
56+
#### Empty Array
57+
58+
- displayProducts()
59+
- check length of filteredProducts
60+
- if list.length < 1
61+
- set productsContainer = some text
62+
63+
#### Display Filter Buttons
64+
65+
- select .companies
66+
- create function displayButtons
67+
- get only unique companies (set)
68+
- iterate over results
69+
- return button with data-id
70+
- set .companies innerHTML equal to result
71+
72+
#### Filter Based on Company
73+
74+
- add event listener on .companies
75+
- look for event.target
76+
- if contains .company-btn proceed
77+
- if 'all' return all products (copy)
78+
- else filter based on company value
79+
- set search value ''
80+
- call displayProducts

‎21-dad-jokes/final/README.md‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
## Dad Jokes Project
2+
3+
#### HTML Structure
4+
5+
- div.container
6+
- button.btn
7+
- p.result(dummy text)
8+
9+
#### External Data
10+
11+
- the main idea the same, just external data
12+
13+
#### What is an API?
14+
15+
[What is an API?](https://www.freecodecamp.org/news/what-is-an-api-in-english-please-b880a3214a82/)
16+
17+
- https://course-api.com/javascript-store-products
18+
- get store products
19+
20+
- https://course-api.com/javascript-store-single-product?id=rec43w3ipXvP28vog
21+
- get single store product
22+
23+
- https://randomuser.me/api/
24+
- random user
25+
26+
#### Docs
27+
28+
- important
29+
- search engine
30+
- test in the browser
31+
32+
#### Dad Jokes Docs
33+
34+
- [Dad Jokes](https://icanhazdadjoke.com/api)
35+
36+
- random joke
37+
- https://icanhazdadjoke.com/
38+
39+
#### Select Elements
40+
41+
- select btn, result
42+
- check if both elements selected
43+
- listen for click events
44+
45+
#### FetchDadJoke Function
46+
47+
- create async function
48+
- setup fetch
49+
- set result.textContent = joke
50+
51+
```js
52+
const fetchDadJoke = async () => {
53+
const response = await fetch(url, {
54+
headers: {
55+
Accept: 'application/json',
56+
'User-Agent': 'learning app',
57+
},
58+
});
59+
60+
const data = await response.json();
61+
result.textContent = data.joke;
62+
};
63+
```
64+
65+
#### Loading
66+
67+
- set result equal to - 'Loading...'
68+
69+
#### Error Handling
70+
71+
- try/catch block
72+
- set result equal to - 'There was an error..'
73+
74+
#### Check Status
75+
76+
- Fetch - only throws an error if cannot resolve
77+
- Error response still a response
78+
- check response.ok property
79+
- throw new Error('Whoops!')

‎21-dad-jokes/final/app.js‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,24 @@ btn.addEventListener('click', () => {
88
});
99

1010
const fetchDadJoke = async () => {
11-
const response = await fetch(url, {
12-
headers: {
13-
Accept: 'application/json',
14-
'User-Agent': 'learning app',
15-
},
16-
});
11+
result.textContent = 'Loading...';
12+
try {
13+
const response = await fetch(url, {
14+
headers: {
15+
Accept: 'application/json',
16+
'User-Agent': 'learning app',
17+
},
18+
});
19+
if (!response.ok) {
20+
throw new Error(' error');
21+
}
22+
const data = await response.json();
1723

18-
const data = await response.json();
19-
result.textContent = data.joke;
24+
result.textContent = data.joke;
25+
} catch (error) {
26+
console.log(error.message);
27+
result.textContent = 'There was an error...';
28+
}
2029
};
2130

2231
fetchDadJoke();

‎21-dad-jokes/final/index.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,16 @@
44
<meta charset="UTF-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Dad Jokes Final</title>
7+
<title>Dad Jokes</title>
88
<link rel="stylesheet" href="./styles.css" />
99
</head>
1010
<body>
1111
<div class="container">
12-
<button class="btn">random dad joke</button>
12+
<button class="btn">random dad jokes</button>
1313
<p class="result">
14-
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto error ab
15-
voluptate fuga a cum autem porro enim accusantium ipsum.
14+
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
15+
unde quibusdam quia ex asperiores consectetur quis maxime corporis
16+
suscipit expedita.
1617
</p>
1718
</div>
1819
<script src="./app.js"></script>

‎21-dad-jokes/starter/README.md‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
## Dad Jokes Project
2+
3+
#### HTML Structure
4+
5+
- div.container
6+
- button.btn
7+
- p.result(dummy text)
8+
9+
#### External Data
10+
11+
- the main idea the same, just external data
12+
13+
#### What is an API?
14+
15+
[What is an API?](https://www.freecodecamp.org/news/what-is-an-api-in-english-please-b880a3214a82/)
16+
17+
- https://course-api.com/javascript-store-products
18+
- get store products
19+
20+
- https://course-api.com/javascript-store-single-product?id=rec43w3ipXvP28vog
21+
- get single store product
22+
23+
- https://randomuser.me/api/
24+
- random user
25+
26+
#### Docs
27+
28+
- important
29+
- search engine
30+
- test in the browser
31+
32+
#### Dad Jokes Docs
33+
34+
- [Dad Jokes](https://icanhazdadjoke.com/api)
35+
36+
- random joke
37+
- https://icanhazdadjoke.com/
38+
39+
#### Select Elements
40+
41+
- select btn, result
42+
- check if both elements selected
43+
- listen for click events
44+
45+
#### FetchDadJoke Function
46+
47+
- create async function
48+
- setup fetch
49+
- set result.textContent = joke
50+
51+
```js
52+
const fetchDadJoke = async () => {
53+
const response = await fetch(url, {
54+
headers: {
55+
Accept: 'application/json',
56+
'User-Agent': 'learning app',
57+
},
58+
});
59+
60+
const data = await response.json();
61+
result.textContent = data.joke;
62+
};
63+
```
64+
65+
#### Loading
66+
67+
- set result equal to - 'Loading...'
68+
69+
#### Error Handling
70+
71+
- try/catch block
72+
- set result equal to - 'There was an error..'
73+
74+
#### Check Status
75+
76+
- Fetch - only throws an error if cannot resolve
77+
- Error response still a response
78+
- check response.ok property
79+
- throw new Error('Whoops!')

‎21-dad-jokes/starter/app.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
console.log('Dad jokes starter');
1+
console.log('Dad Jokes Starter');

‎23-random-user/final/app.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import get from './utils/getElement.js';
2+
import getUser from './utils/fetchUser.js';
3+
import displayUser from './utils/displayUser.js';
4+
5+
const btn = get('.btn');
6+
7+
const showUser = async () => {
8+
// get user from api
9+
const person = await getUser();
10+
displayUser(person);
11+
12+
// display user
13+
};
14+
15+
window.addEventListener('DOMContentLoaded', showUser);
16+
btn.addEventListener('click', showUser);

0 commit comments

Comments
 (0)