Description

In short, we will be building a dad joke generator. When you click the "Make me laugh" button, you'll be told a hilarious, eyeroll-worthy joke!

This has a CSS styling component and a JavaScript component.

• For styling, reference the mockups and guide under "Step 1 - the UI"
• For scripting, we'll be fetching jokes from the dad joke API. It'll be pretty straightforward once we get there

Step 1 - the UI

Alright, before we jump into any JavaScript madness, let's take a look at the UI we'll be building.

Layout

This page will be pretty straightforward. All we need is a button to generate the joke and a way to view / cringe at it!

This will be accomplished with a split view, showing the site description and button on the left and our joke on the right. We'll also be including a tasteful gif of someone clapping at our HILARIOUS puns.

Step-by-step guide

1. Create two containers, one for all of our content on the left and another for our joke + image on the right. You'll use flexbox to get them displaying next to each other.
2. Center our leftward content horizontally and vertically inside of its container
3. Include a header about the site. This should be an h1 tag
4. Include a description of what the joke generator does.
5. Include a button tag with our call to action text (Make me laugh!). Don't worry, the button doesn't need to do anything yet.
6. Add a paragraph and image in our right container. You can get the URL of an image you Google by right clicking on the image and selecting "Open image in new tab."
7. Mess with border-radius, background-color, font-family, and other properties to get it looking snazzy