This type of project (random joke generator API) is much easier to create through API. The API helps you retrieve content from any other website and display it in places you like. Various websites provide such API links.
This type of project has a generate button. When you click on it, different content will start to be generated.
See the Pen
Random Joke Generator using API by Raj Template (@RajTemplate)
Step 1: Basic structure of Joke Generator
I have used the following HTML code to create its basic structure. Here I used the box width: 400px and background-color: #fafdfd. With this, the four angles helped to make something round, border-radius: 5px.
Step 2: Add headings to enhance the beauty
Now I have an HTML tag that will basically work the title here. I used it mainly to enhance the beauty. Text-align: center to keep the text in the middle of the box and font-size: 25px to increase its size.
Step 3: Create a joke viewing area
Now I have created an area in which this joke can be seen. For this, we first created the area with the help of HTML paragraph tags. No specific width, the height of this area has been determined, it will determine its own size based on the amount of content.
Here we have used opacity: 0 which will normally hide everything in this area.
Now using “fade” I have used opacity: 1. This means that when “fade” is effective, the contents of the display can be seen.
Step 4: Create a generate button using HTML
Now I have created a button that will generate jokes randomly. For this, I have used the button function of HTML.
First I set the constant of one of the display and button’s ID functions.
Now I have added an API link to the project. As I said before API will help to bring all the content from any other website or source.
I have made all the calculations in the constant called ‘getJoke’ how to generate joke.
➤ First I have instructed to remove “fade” using “classList.remove”. With “fade” removed, nothing can be seen on the display.
➤ Then I saved all the data from the URL using the “fetch” method and arranged to display it in the display with the help of textContent.
➤ In the meantime, I have created a display using paragraph tags. Then instructed to add “fade” using classList.add. As a result, the text can be seen in the display.
Now I have activated the generate button. This generate button will help you to perform the calculation we added above.
When you click on the button, it will execute the above calculation (getJoke).