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 JavaScript 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.


All Quotes of this Quote Generator have been added manually. But before that, I created another JavaScript Quote Generator using API link.

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">
 
 </div>
</div>


body{
  background: #88d3e8;
}

.container{
  position: relative;
  top: 100px;
}

.card{
  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.
</h4>


.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.

#quoteText::before{
  font-family:Arial;
  content: "\201C";
  color:#78C0A8;
  font-size:4em;
  position: absolute;
  right: 510px;
  top:-5px;
}

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.

#quoteText::after{
  font-family:Arial;
  content: '\201d';
    color:#78C0A8;
  font-size:4em;
  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 = [
  {
    quote:
      "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"
  },
  {
    quote:
      "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"
  },
  {
    quote:
      "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"
  },
  {
    quote:
      "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.





Comments

Post a Comment

Tell me what you think ??😎

Popular posts from this blog

Simple Day Night Toggle Button Using HTML and CSS

Image
Day-Night Toggle Button is a common web element that is often found on websites. This Day Night Toggle Switch in the navigation bar helps to choose the dark and light theme of the website. Currently, the Day And Night Toggle Switch can be seen on almost all major websites starting from Facebook and Instagram. Demo Download This article will help you to know step by step how to create Day Night Toggle Button using CSS . This type of CSS Toggle Button is used to create HTML checkboxes . Here's how to easily create a Toggle Switch using the checkboxes. CSS Day Night Toggle Button Although there are many such tutorials on the Internet. But here I will tell you how to make Day Night Toggle Button and how to implement it in your project. A check box was first created using HTML input to create this button. Then that checkbox is shaped like a button by CSS. To make CSS Day Night Toggle Switch you must have some idea about HTML and CSS. This is not the first time I ha
Read more

Splash Image Mask Using HTML and CSS (Free Code)

Image
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image.  Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image.  Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file.  Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code: The following
Read more

Simple RGB Color Generator Using JavaScript & CSS

Image
In this article, you will learn how to create RGB Color Generator using JavaScript. Earlier I shared with you the project of different types of JavaScript color generators . Some projects create background colors, some gradient colors, and some generate random colors.  Using this simple RGB Color Generator you can manually generate RGB color . It is much more modern and professional than other color generators. Here you can mix different colors together and create gradients.  This JavaScript RGB Color Generator project has various control buttons. With the help of which you can create gradients by adding colors in different ways.  JavaScript RGB Color Generator Many times I use different applications or websites to create my gradient color . In that case, such a project will help you. You can get the required code of the color you have created from here. Which you can copy directly and use as CSS code. Below I have given a demo that will help you to know how this project (RGB Color
Read more