https://github.com/kaushikshivam/dad_jokes
Dad Jokes is an app that lets people view and vote on cheesy jokes. When the page loads, it fetches 10 jokes. The application lists the jokes, along with a “vote-up” button, a “vote-down” button, and the net score for each joke. Users can vote, and the net score should update.
https://github.com/kaushikshivam/dad_jokes
css css3 html html5 react react-animations react-components react-life-cycle react-redux react-router reactjs
Last synced: about 2 months ago
JSON representation
Dad Jokes is an app that lets people view and vote on cheesy jokes. When the page loads, it fetches 10 jokes. The application lists the jokes, along with a “vote-up” button, a “vote-down” button, and the net score for each joke. Users can vote, and the net score should update.
- Host: GitHub
- URL: https://github.com/kaushikshivam/dad_jokes
- Owner: KaushikShivam
- Created: 2019-10-12T08:50:52.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-03-10T13:05:56.000Z (about 6 years ago)
- Last Synced: 2025-05-18T13:49:53.491Z (about 1 year ago)
- Topics: css, css3, html, html5, react, react-animations, react-components, react-life-cycle, react-redux, react-router, reactjs
- Language: JavaScript
- Homepage: https://dadjokesofficial.netlify.com/
- Size: 765 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Dad Jokes
[Dad Jokes](https://dadjokesofficial.netlify.com/) is an app that lets people view and vote on cheesy jokes. To generate jokes, I used the ICanHazDadJoke API.
## Table of content
- [Project Specifications](#Specifications)
- [Installation](#installation)
- [Contact](#contact)
## Specifications
When the page loads, it fetches 10 jokes.
The application lists the jokes, along with a “vote-up” button, a “vote-down” button, and the net score for each joke. Users can vote, and the net score should update.
### Further Study
- When jokes are loading, it displays a loading spinner or message notifying the user that the jokes are being loaded. This hides once the jokes have finished loading.
- There are no duplicate jokes shown.
- It shows the jokes sorted by net score, and update this as the scores change.
- It stores the list of jokes, with votes in local storage. When users visit the app, it shows saved jokes, rather than fetching new jokes. However, the user can still generate new jokes via the button, and these new jokes then replace the ones in local storage.
- It has CSS styling for the joke app, including FontAwesome thumbs-up/down images for the voting buttons.
## Installation
1. Clone the project to your local directory
```
git clone https://github.com/KaushikShivam/dad_jokes
```
2. The project uses NPM for managing dependencies. Run npm install to install all the required dependencies
```
npm install
```
3. Run the task runner to run the app
```
npm run start
```
## Contact
You can contact me at:
- [Portfolio](https://www.shivamkaushik.com)
- [Email](mailto:shivamkaushikofficial@gmail.com)
- [Linkedin](https://www.linkedin.com/in/kshivamdev/)
- [Twitter](https://twitter.com/kShivamDev)
- [Medium](https://medium.com/@shivamkaushikofficial)
- [Angellist](https://angel.co/kshivamdev)