Hello my all readers, a very warm greetings of the day. Today, in this blog,we'll learn about how to create a random quotes generator using JavaScript. Let's start it :
Before starting the project,let's check actually what we are going to build. Here is the screenshot of the project.
If you click on button New Quote, it will display you some random quotes which we saved in our Array.
One more thing I must tell you that here we are only focussing on logic instead of styling.
Let's look at our html file. Here are just the basic coding.
<header id="header">
<div class="content">
<h1>Quote of the Day</h1>
<p id="quotes">If you want to live a happy life, tie it to a goal, not to people or things
</p>
<hr>
<button id="btn">New Quote</button>
</div>
</header>
There is nothing complicated here if you know the basics of html. We are using two ids here. One with p tag and one with button tag.
Now let's write our JavaScript code :
<script>
const btn = document.getElementById('btn');
// Using an event listener on Button click
btn.addEventListener('click', () => {
// Created an Array and it contains some inspirational quotes
const randomQuotes =
[
"The purpose of our lives is to be happy",
"Arise, awake, and stop not until the goal is achieved",
"Get busy living or get busy dying",
"Talk to yourself once in a day, otherwise, you may miss meeting an excellent person in this world",
"Many of life’s failures are people who did not realize how close they were to success when they gave up",
"A man is not poor without a rupee but a man is really poor without a dream and ambition",
"Everything we do, physical or mental, is Karma, and it leaves its marks on us",
"Do one thing at a time, and while doing it put your whole soul into it to the exclusion of all else",
"Believe in yourself and the world will be at your feet"
];
// Creating a random number
const randomNum = Math.floor(Math.random() * randomQuotes.length)
document.getElementById("quotes").innerHTML = randomQuotes[randomNum]
// Sending our Random Number Result in our paragraph tag using id
})
</script>
Let's understand it step by step :
We are targeting our button whose id is btn and storing in variable btn.
We want an functionality that if we click on button, it should return our quotes which we have saved here in variable randomQuotes You can add or delete as per your needs or write your own.
const randomQuotes =
[
"The purpose of our lives is to be happy",
"Arise, awake, and stop not until the goal is achieved",
"Get busy living or get busy dying",
"Talk to yourself once in a day, otherwise, you may miss meeting an excellent person in this world",
"Many of life’s failures are people who did not realize how close they were to success when they gave up",
"A man is not poor without a rupee but a man is really poor without a dream and ambition",
"Everything we do, physical or mental, is Karma, and it leaves its marks on us",
"Do one thing at a time, and while doing it put your whole soul into it to the exclusion of all else",
"Believe in yourself and the world will be at your feet"
];
3.Now, we need an another variable randomNum. It will always return a random number from our array length. In nutshell, it will give a number from 1-9.
const randomNum = Math.floor(Math.random() * randomQuotes.length)
- Just last step, we have create an array and a event listener already. We have also got a random number from our Array length. Now just send this random number to paragraph tag as we are displaying result here.
document.getElementById("quotes").innerHTML = randomQuotes[randomNum]
As you can see, we are targeting paragraph tag with id quotes.
Do you understand the code which is written right hand side ? Why we have written randomQuotes[randomNum] here ?
If you just write randomQuotes[], it will return complete array but here we want a random number, thats why we used put randomNum inside our array.