Dad Jokes an app built for a laugh using React and an API
Upload images of wireframe to cloudinary and add the link here with a description of the specific wireframe.
- Find and use external api
- Render data on page
- Navigation to routes
- Random joke
- Search for joke
- Allow user to choose favorites
- Save their choices in firebase
- Add user auth
App > Header > Nav
App > Search > JokesList > JokeItem
App > RandomJoke
App > Footer
App
Search, JokesList, JokeItem, RandomJoke, Header, Nav, Footer
Component | Description |
---|---|
Header | This will render the header include the nav |
Nav | This will render the nav |
Search | This will render the search input text and button |
JokesList | This will render the list of jokes returned from search |
JokeItem | This will render the joke item in the list |
RandomJoke | This will render the random joke with button to randomize joke |
Footer | This will render the footer include the link to github and api |
Component | Priority | Estimated Time | Time Invetsted | Actual Time |
---|---|---|---|---|
Set up app | H | .5hrs | .5hrs | .5hrs |
Random | H | 2hrs | 2.5hrs | 2.5hrs |
Search Form | H | 3hrs | 3.5hrs | 2.5hrs |
Footer and Header | H | 3hrs | 3.5hrs | 1.5hrs |
React Router | H | 2hrs | 1.5hrs | 1.5hrs |
Style | H | 2hrs | 2.5hrs | 2.5hrs |
Total | H | 12.5hrs | 14hrs | 11hrs |
Function | Description |
---|---|
Footer | This component could be use in playground projects |
All state for app is contained in App.js
this.state = {
randomJoke: '',
jokes: [],
term: ''
}
Use this section to list of all major issues encountered and their resolution.
ERROR: Unexpected token < in JSON at position 0
RESOLUTION:
https://daveceddia.com/unexpected-token-in-json-at-position-0/
Sent request with header to accept json data
randomAPI() {
let api = 'https://icanhazdadjoke.com/'
fetch(api,
{
headers: {
'Accept': 'application/json',
'User-Agent': ' My Library (https://github.com/tara-fenton/dad-jokes)'
}
}
).then(response => response.json())
.then(json => {
this.setState({ randomJoke: json.joke })
}).catch(e => console.log(e))
}
logic setting up button events testing events
logic setting up search events testing search events