https://github.com/drakealia/js-dad-jokes
Based on John Smilga's js course
https://github.com/drakealia/js-dad-jokes
Last synced: about 1 month ago
JSON representation
Based on John Smilga's js course
- Host: GitHub
- URL: https://github.com/drakealia/js-dad-jokes
- Owner: DrakeAlia
- Created: 2022-05-27T17:24:09.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-05-29T19:17:34.000Z (about 4 years ago)
- Last Synced: 2025-02-22T04:26:25.320Z (over 1 year ago)
- Language: CSS
- Homepage:
- Size: 3.91 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Dad Jokes Project
#### HTML Structure
- div.container
- button.btn
- p.result(dummy text)
#### External Data
- the main idea the same, just external data
#### What is an API?
[What is an API?](https://www.freecodecamp.org/news/what-is-an-api-in-english-please-b880a3214a82/)
- https://course-api.com/javascript-store-products
- get store products
- https://course-api.com/javascript-store-single-product?id=rec43w3ipXvP28vog
- get single store product
- https://randomuser.me/api/
- random user
#### Docs
- important
- search engine
- test in the browser
#### Dad Jokes Docs
- [Dad Jokes](https://icanhazdadjoke.com/api)
- random joke
- https://icanhazdadjoke.com/
#### Select Elements
- select btn, result
- check if both elements selected
- listen for click events
#### FetchDadJoke Function
- create async function
- setup fetch
- set result.textContent = joke
```js
const fetchDadJoke = async () => {
const response = await fetch(url, {
headers: {
Accept: 'application/json',
'User-Agent': 'learning app',
},
});
const data = await response.json();
result.textContent = data.joke;
};
```
#### Loading
- set result equal to - 'Loading...'
#### Error Handling
- try/catch block
- set result equal to - 'There was an error..'
#### Check Status
- Fetch - only throws an error if cannot resolve
- Error response still a response
- check response.ok property
- throw new Error('Whoops!')