Random Dad Joke Generator

This was another simple app I built utilizing the JavaScript Library, React. I went ahead and made sure to create a backend, so I used Ruby on Rails with a PostgreSQL database so if I want to persist new jokes in the future, I won’t have to do much to make it happen.

Currently, the entire app is taking place in React. A fetch request is generated in the main container file inside of the componentWillMount() function. This fetch request is directed towards a JSON file I found that matched my needs on GitHub. The fetch request then populates the component state with the contents of the JSON.

Later in the return function, I have a function tied to an onClick event which runs a randomizer function. This function sets another state to be equal to a random dad joke, it is this state which is referenced in the joke card below the CTA.

If I ever come back to this, I want to implement maybe a REGEX, or better yet, find a JSON that is structure how I would like – i.e. setuppunchline as being separate values (currently they are both included in the same string). If I can get this, I would be able to use some CSS3 animations to maybe flip a card around to reveal the punchline and make the User Experience a little more fun.


Submit a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s