Random quotes generator in JavaScript

Hello Friends, In this blog, we will work on a javascript project called random quotes generator. We will generate different quotes from famous people using simple HTML CSS and javascript codes. Many online services can help you to generate random quotes but I thought it’s better to learn how to generate random quotes yourself. It’s more fun to generate the quotes yourself. I hope you will enjoy this project. Before collecting the code I will suggest you watch the video tutorial below. This tutorial shows step by step process on how to create a random quotes generator in javascript. We have over 1000+ videos on our youtube channel about front-end-development. If you are interested to learn front-end you can subscribe to our YouTube Channel.

What is Random Quotes Generator? Random Quotes Generator is a very simple app. It is a web application that can be used to generate random quotes. In this Project, you can find a 'Find Quotes' Button which will generate different quotes with the writer's name when you click on it. Here we have an index.html file where we have designed the UI of the project and then we have a style.css file where we have styled the elements of the project. After that, we have a custom.js file where we have used vanilla javascript to make the quote generator. In the custom.js file, we will first take an array. In this array, we will put all the quotes as an object. We will name the array as quotes. First of all, we will create an object and then put property and value in it. We have included the quote and writer's name in the object. I have included ten quotes here but you can take as many quotes as you want. Please follow the above tutorial to understand what I am saying. After that, we have to select all the needed elements of the project and put them into separate variables. After that, we will include a click event to the button. As we are creating a random quote generator so all the quotes have to appear randomly not sequentially. So we have applied a method named 'random'. This Math.random method is used as we know for creating random numbers. So when we click on the button random numbers (quotes in this case) will appear on the box. If we check the code on the console we will get fractions of numbers. That's why we have to add quotes.length in our code. Later we have shown the quotes and writer names using a random method.

You May Also Like:

Random quotes generator in javascript [ Source Code ]:

To complete this project you will need to create a few different files. The first of these is an HTML file, the second is a CSS file and the third is a JavaScript file. Copy the code from the below code box and paste them into your project. You can download the code from the download button below.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>Random Quotes Generator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
      
      <div class="header">
        <h2>Javascript Quote Generator</h2>
      </div>
  
      <div class="main-content">
       
        <div class="text-area">
          <span class="quote">"Life is what happens when you're busy making other plans"</span>
        </div>
        
        <div class="writer">– John Lennon</div>
  
        <div class="button-area">  
          <div class="btn">
            <button id="Qbtn">Find Quotes</button>
          </div>
        </div>
        
      </div>
  
    </div>
    
    <script src="custom.js"></script>
</body>
</html>

ADD CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: montserrat;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: chocolate;
    height: 100vh;    
}
.container {
	width: 550px;
	height: 450px;
}
.header {
	text-align: center;
	margin-bottom: 50px;
}
.header h2 {
    font-weight: 400;
    color: #fff;
}
.main-content {
	width: 100%;
	height: 300px;
	padding: 50px 40px;
	background-color: #fff;
	border-radius: 15px;
	box-shadow: 0 25px 31px 0 rgba(0,0,0,0.5);
}

.text-area {
	text-align: center;
	font-size: 25px;
	color: #262626;
	line-height: 1.5;
    
}
.text-area .icon {
    margin-right: 5px;
}
.main-content .writer {
    text-transform: uppercase;
	letter-spacing: 5px;
	color: red;
	text-align: center;
	margin-top: 20px;
	font-size: 25px;
	
}
.main-content .button-area {
	display: grid;
	place-items: center;
	margin-top: 20px;
	padding: 10px 0;
}
.button-area .btn button {
    background-color: #262626;
    color: #fff;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    outline: none;
    padding: 10px 15px;
    
}
.button-area button:active {
    background-color: deepskyblue;
}

ADD JS:

const quotes = [{
    quote: `"You only live once, but if you do it right, once is enough."`,
    writer: `– Mae West`
}, {
    quote: `"If you want to live a happy life, tie it to a goal, not to people or things."`,
    writer: `– Albert Einstein`
}, {
    quote: `"Never let the fear of striking out keep you from playing the game."`,
    writer: `– Babe Ruth`
}, {
    quote: `"Your time is limited, so don’t waste it living someone else’s life."`,
    writer: `– Steve Jobs`
}, {
    quote: `"In order to write about life first you must live it."`,
    writer: `– Ernest Hemingway`
}, {
    quote: `"Life is not a problem to be solved, but a reality to be experienced."`,
    writer: `– Soren Kierkegaard`
}, {
    quote: `"The unexamined life is not worth living."`,
    writer: `– Socrates`
}, {
    quote: `"Turn your wounds into wisdom."`,
    writer: `– Oprah Winfrey`
}, {
    quote: `"The purpose of our lives is to be happy."`,
    writer: `- Dalai Lama`
}, {
    quote: `"Live for each second without hesitation."`,
    writer: `- Elton John`
}, ]





let btn = document.querySelector("#Qbtn");

let quote = document.querySelector(".quote");

let writer = document.querySelector(".writer");






btn.addEventListener("click", function() {
    let random = Math.floor(Math.random() * quotes.length);
    
    
    quote.innerHTML = quotes[random].quote;

    
    writer.innerHTML = quotes[random].writer;
})

I hope you have successfully implemented the code. Please share the articles on this blog. Learn for yourself and help others learn. Thanks for visiting our Blog.

DOWNLOAD CODE

Random quotes generator in javascript [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Random quotes generator in JavaScript

Random quotes generator in javascript [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form