Father's Day means Dad Jokes.

This is a submission for Frontend Challenge - June Celebrations, Perfect Landing: June Celebrations

What I Built

How is a web site like a Dad joke? It needs a good landing.

Father's Day means you have to laugh at your Dad's joke. For this challenge, I built a landing page for dad jokes. It has plenty of Dad jokes, a button to get a random joke, and links to more dad jokes related content.

Demo

This is the codepen for the site.

The live page.

live page

Journey

I was trying to figure something do for a June Celebration. Fathers Day's was just a few days away. Humor and jokes are a big part of my family so I focused on laughing with my dad and son.

This is a static HTML site with a button that calls a Joke API. I modified my code from a Danny Thompson tutorial from a while ago. I could have changed APIs but this one had a filter option to block inappropriate jokes. I set the call to send puns and block NSFW stuff.

The color pallet is based off of Dad's Root Beer branding. I thought about making a CSS version of the can for the art challenge but wanted something up the Friday before Father's Day. I may do it before DEV's Challenge Deadline of June 29.

The cover image was made with Photoshop. The logo is what was envisioned for the CSS Art. It may be added to the live page.

Updates

Now with more JavaScript. There's now an enter a joke section. Input a joke and get and AI, adolescent individual, response. Used JavaScript to pull a random response from an array.

Added the cover image to the live site.

This blog earned the Top CSS badge.

I visited a bunch of joke sites to find some that were decent to share. I'd like to add a section to submit your own jokes. This is not finished, It will be updates as time allows. Just wanted it up before Father's Day.

This was a fun early internet kind of build. I really enjoyed researching and building it.