Code Media

How to Make a Quote Generator in JavaScript (2021 Update)

How to Make a Quote Generator in JavaScript

If you want to create a Simple Quote Generator using JavaScript then this tutorial will help you completely. In this article, I have shown you how to create Random Quote Generator using HTML CSS, and JavaScript. 

The quote is a very important thing that motivates us a lot. There are many websites that generate such quotes. However, you can create your own Quote Generator if you have an idea about basic HTML CSS, and JavaScript.

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.

JavaScript Quote Generator

The tutorial below shows how I created this JavaScript Quote Generator. That’s why I first designed the webpage and then created a box. The first in this box is a display where this quote can be found. Then there is a small button on which the quotes will change after clicking.

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.

<div class=”container”>
 <div class=”card”>
  background: #88d3e8;
  position: relative;
  top: 100px;
  background: #eff3f5;
  width: 450px;
  border-radius: 10px;
  padding: 30px 20px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.5;
 font-family: ‘Poppins’, sans-serif;
Basic structure of Quote Generator

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.

<h4 id=”quoteText”>
    The purpose of our lives is to be happy.
.card h4{
  font-size: 18px;
Create a place to view quotes

 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.

  content: “\201C”;
  position: absolute;
  right: 510px;
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.

  content: ‘\201d’;
  position: absolute;
  left: 510px;
  bottom: 50px;
CSS's after tags

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.

<p id=”nameText”>Author</p>
.card p{
  color: #088ff0;
  font-size: 16px;
  font-weight: 800;
  font-family: ‘Roboto’, sans-serif;
.card p::before{
  content: “-“;
  margin-right: 5px;
Add the author's name

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.

<button onClick=”generateQuote()”>Next Quote</button>
.card button{
  width: 120px;
  height: 45px;
  font-size: 16px;
  border: none;
  background: #DF2E2E;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  color: #fff;
Create a Quote Generator button

Step 5: Activate Quote Generator with JavaScript

Now is the time to fully implement its project (Quote Generator in JavaScript) with the help of JavaScript. I have designed this Quote Generator using HTML and CSS. Now we need the help of JavaScript to make it work.

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.

“use strict”;
const quotes = [
      “Life is too short and sweet to be spent by cribbing and complaining about things. Here are some random quotes about the most wonderful gift that we’ve got”,
    author: ” Life”
      “Humor is richly rewarding to the person who employs it. It has some value in gaining and holding attention. But it has no persuasive value at all”,
    author: “John Kenneth Galbraith”
    quote: “God save me from my friends. I can protect myself from my enemies.”,
    author: “Claude Louis Hector de Villars “
    quote: “The price of anything is the amount of life you exchange for it.”,
    author: “David Thoreau”
      “Life is like a landscape. You live in the midst of it but can describe it only from the vantage point of distance. “,
    author: “Charles Lindbergh”
      “A critic is someone who never actually goes to the battle, yet who afterwards comes out shooting the wounded.”,
    author: ” Tyne Daly”

Now one of the ID functions of quota viewing place and author name viewing place is fixed one by one. This is because no HTML function can be used directly in JavaScript.

let q = document.querySelector(“#quoteText”);
let n = document.querySelector(“#nameText”);

 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.

function generateQuote() {
  let random = parseInt(Math.random() * quotes.length);
  q.innerHTML = quotes[random].quote;
  n.innerText = quotes[random].author;
Quote Generator with JavaScript

If there is any difficulty then you can definitely let me know by commenting. Below you will find the required source code that has been used to create Quote Generator. You must comment on how you like this JavaScript Quote Generator.

Leave a comment