Random Joke

This is one of the challenge projects in the Frontend Developer Career Path program at Scrimba. The objective is to demonstrate how to use the Fetch API in an Async/Await function.

TECH OVERVIEW

• HTML/CSS
• Async/Await
• OfficialJoke API

I started the project by firts building the structure of the site, creating a main section to hold a joke, punchline, getPunchline button and newJoke button, and a Footer section. Then I styled all the elements using CSS.

Finally, I created the getPunchline function with a toggle method inside and set up an async function called getJokes() which pulls in data (jokes & punchlines) from the OfficialJoke API using fetch.

ROADBLOCK ENCOUNTERED: I experienced difficulty in styling the joke and punchline divs to look like a bubble.

SOLUTION: To solve this, I used the pseudo element ::before to add addtional styling to the divs.

To learn more visit Github

Random Joke Website.