The project I have created here will generate a quote with a single click. There is a generator button for this. Each time you click on it, a separate quote is generated and displayed on the display.
Earlier I created another Quote Generator that works via API link. That is, no quote was added manually. With the help of the API link, information from any other website has been collected and shown here.
See the Pen Untitled by Code Media (@codemediaweb) on CodePen.
Hopefully, the demo above has helped you to know how it works. You will find the required source code in the demo above. You will also find a download button at the bottom of the article. But if you are a beginner and want to know how I created this Random Quote Generator then keep following the tutorials below.
Step 1: Basic structure of Quote Generator
I have created a box using the following HTML and CSS code. All the information can be found in this box. Box width: 450px and height will depend on the amount of content. The background color of the box is white.
Step 2: Create a place to view quotes
Now I have made a box to see the quotas. All quotas can be seen in this display. I have added a default text here which can be seen in normal conditions. Quotas can be seen when you click on the button.
Now I have used two symbols to enhance the beauty of these quotes. I used CSS before and after tags to make this mark. Below I created the first icon using the :Before tag.
Now I have created the second icon using CSS’s after tags. Using these two symbols will increase the beauty of these quotes more and more.
Step 3: Add the author’s name
Now I have created a place to see the author’s name. Here I have used paragraph tags.
Step 4: Create a Quote Generator button
Now it’s time to create the Generator button. The button is width: 120px, height: 45px and the background color is red.
I have stored all the information in the constant called “quotes” below. Here we have stored all the text in the constant called “quote” and stored the author’s name in the constant called “author”.
If you want to add more quotas then you have to follow the same format.
Now the generated system has been created. For this, first, we have stored all the information between q and n. Then using innerHTML to display this information on the web page. Here’s a picture that might help you even more.