Wanna crack jokes like Chandler but run out of jokes? Worried no more.
Try this joke-generator website for unlimited funny jokes: https://funnyjoke-generator.netlify.app/
Vanilla JavaScript, HTML, CSS, Joke API by Sv443.
Clicking the "Get me a joke" button will display a random joke.
- The HTML code consists of a container that encloses other elements.
- Inside the container a span contains the laughing emoji. I have used the Unicode of laughing emoji – &128514.
- Here I have used the Joke API by Sv443.
- Following the span is the p element where the joke is displayed. And a button consists of text – ‘Get Me A Joke’.
- The CSS styles used here are pretty basic and self-explanatory.
- Used the usual CSS reset to remove the unwanted paddings and margins.
- The container is 80vmin wide. Using the absolute position and translate property, the container is centred.
- To make it stand out even more, added some box shadow to it.
- Added event listeners to the button and the paragraph, assigned them to variables.
- Next, created a constant and assigned the API URL to it.
- Here I have used the Joke API by Sv443.
- Fetched and got a JSON response. That response is a JSON object.
- I needed the joke key from that object. Extracted the value of the joke key and displayed it in the p element.
- Next, added a click event to the button so that the get Joke function is run on every button click.
- And that’s it. The joke generator was ready.
Here is the link: https://funnyjoke-generator.netlify.app/ Have fun using it!