Below I have given a demo that will help you to know how this Random Quote Generator HTML works. If you only want the source code, you can use the download button below the article.
First I created a heading on a webpage with a blue background. Then I made a box with a display. Quote, and author’s name can be seen in that display. In the end, there is a button that will generate a different quote every time you click on it.
As I said before, all these quotes are not added manually. It has been collected and brought to other websites using API links.
Here I have used API links on a website. If you want you can use the API link on the website of your choice. There are many websites on the internet that provide such API links.
Step 1: Design the webpage
I have created the basic structure of this Random Quote Generator using the following codes. Here the background color of the webpage is blue.
Step 2: Add a heading
Now I have created a heading which is basically to enhance the beauty. The h2 tag of HTML has been used for its heading. I used white color and text color blue in the background of the title.
Step 3: Basic structure of Quote Generator
Now I have created a box in which this quote can be found. The background color of this box is white and shadows have been used all around to enhance the beauty.
Step 4: Create a Quote View Display
Now a display has been created in which the text of the quote and the name of the author can be seen.
The display has been designed using the following codes. I used a box shadow around the display and used a border.
I have designed the text of the quote and the name of the author using the following codes. I have already added a hyphen (‘-‘) to the author’s name before using it.
Step 5: Create a Quote Generate button
Now the generate button has been created which will generate a different quote every time you click on it.
I created that button using the button function of HTML. Button’s background is used in Garo blue color and text color white.
Now I have stored an API link in a constant called ‘url’. All information will be fetched using this link. If you wish you can use any other link instead of this link.
Now all the information containing the API link has been fetched using the following code. All of these calculations have been assigned a constant called ‘getQuote’.
Here the information of quote and author has been collected and it has been arranged to display it in the webpage with the help of ‘innerText’.
When you load the window, ie open this Random Quote Generator HTML for the first time, an automatic quote will be generated automatically.
For which the following code line has been used. Here are the instructions, when you load this page, the above calculations (getQuote) will be effective and new quotes will be available.
Now I have activated the generate button. The above calculations will work when you click on that button. As a result, another quote can be generated.
Random Quote Generator HTML Code
All you have to do is create an HTML file and add these codes. If you have difficulty copying these codes, use the download button below.
Hopefully the above code and tutorial have helped you to create this Random Quote Generator HTML CSS. I have created many more such projects before, notably random password generator, random joke generator, etc.