DEV Community

Cover image for How to build a JavaScript Random Quote Generator
Stackfindover
Stackfindover

Posted on

How to build a JavaScript Random Quote Generator

Hello guys, today I am going to show you How to build a JavaScript Random Quote Generator using HTML CSS & JavaScript, in this video, I will create a simple quote generator.

JavaScript Random Quote Generator step by step

Step 1 — Creating a New Project

In this step, we need to create a new project folder and create files(index.html, style.css, quotes.js) inside the folder. for creating a Random Quote Generator. In the next step, you will start creating the structure of the webpage.

You may like these also:

  1. 🔥 Best 25+ Stunning CSS Fire Animations 2021
  2. How to create code compressor in JavaScript | HTML Minifier

Step 2 — Setting Up the basic structure

In this step, we will add the HTML code to create the basic structure of the project.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to build a JavaScript Random Quote Generator</title>
    <link rel="stylesheet" href="style.css">
    <script src="quotes.js"></script>
</head>
<body>

</body>
</html> 
Enter fullscreen mode Exit fullscreen mode

This is the base structure of most web pages that use HTML.
Add the following code inside the <body> tag:

<section class="randomQuote">
        <header>
            <h2>Quote of the Day</h2>
            <p>Press the below button to receive a random quote!</p>
        </header>
        <div class="quotesOutput">
            <p id="generatedQuote">"The greatest glory in living lies not in never falling, but in rising every time we fall."</p>
            <span id="AuthorName">--Nelson Mandela</span>
        </div>
        <button onclick="generateQoute()">New Quote</button>
</section>
Enter fullscreen mode Exit fullscreen mode

Step 3 — Adding Styles for the Classes

In this step, we will add styles to the section class Inside style.css file

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}
header {
    text-align: center;
    background: #4b00ff;
    color: #fff;
    padding: 10px 0;
    margin-bottom: 10px;
}
.quotesOutput {
    text-align: center;
    background: #dde1ff;
    padding: 20px;
    min-height: 50px;
    margin-bottom: 20px;
}
button {
    display: block;
    width: 150px;
    height: 40px;
    font-size: 16px;
    font-weight: 600;
    background: #4b00ff;
    color: #fff;
    border: transparent;
    margin: auto;
    cursor: pointer;
}
p#generatedQuote {
    font-size: 16px;
    font-weight: 800;
}
Enter fullscreen mode Exit fullscreen mode

Step 4 — Adding some lines of JavaScript code

In this step, we will add some JavaScript code to build Quote Generator.

const arrayOfQuotes = [
    {'author': 'Nelson Mandela', 
        'quote': 'The greatest glory in living lies not in never falling, but in rising every time we fall.'
    },
    {'author': 'Walt Disney', 
        'quote': 'The way to get started is to quit talking and begin doing.'
    },
    {'author': 'Eleanor Roosevelt', 
        'quote': 'If life were predictable it would cease to be life, and be without flavor.'
    },
    {'author': 'Oprah Winfrey', 
        'quote': 'If you look at what you have in life, you`ll always have more. If you look at what you don`t have in life, you`ll never have enough'
    },
    {'author': 'James Cameron', 
        'quote': 'If you set your goals ridiculously high and it`s a failure, you will fail above everyone else`s success'
    },
    {'author': 'Elbert Hubbard', 
        'quote': 'Do not take life too seriously. You will not get out alive.'
    },
    {'author': 'John Lennon', 
        'quote': 'Life is what happens when you`re busy making other plans.'
    }
];

// Create a function to generate quote from array

function generateQoute(){
    const random = Number.parseInt(Math.random()*arrayOfQuotes.length + 1);
    document.querySelector("#generatedQuote")
    .textContent = `\"${arrayOfQuotes[random].quote}\"`;
    document.querySelector("#AuthorName")
    .textContent = `--${arrayOfQuotes[random].author}`;
}
Enter fullscreen mode Exit fullscreen mode

Random Quote Generator Final Result

Top comments (9)

Collapse
 
ashishk1331 profile image
Ashish Khare😎

Come on, this ain't a thing. You can create an API for serving quotes and a simple Json db for storing and updates, which is a better approach. Plus, this is just a client to such API where you had hard coded quotes.

Collapse
 
stackfindover profile image
Stackfindover

Thanks :) You are right, but this is only how we can deal with the array, also we can use API and db

Collapse
 
ashishk1331 profile image
Ashish Khare😎

So, you are saying you wrote this post to show how to handle an array. Not, right!

Thread Thread
 
stackfindover profile image
Stackfindover

This post is How to build a JavaScript Random Quote Generator with array not any api or db

Thread Thread
 
ashishk1331 profile image
Ashish Khare😎

Don't get me started on heading, according to the former, it should construct a quote from random words because being a generator. A generator takes raw materials and process it into a useful form. Bro, I'm done with this and now I take this post as your side/fun tutorial for newbies. Concluded, not worth for anyone above the bar.
With regards and respect,
AshishK

[thread ended]

Collapse
 
harinivas profile image
Harinivas

Yeah, there's already API available for generating quotes on the internet. It's a better approach for this project.

Collapse
 
shreyazz profile image
Shreyas Pahune

Just a suggestion, you should add a codepen to the blog, so the user get to interact and see what you have built.

Collapse
 
brandonwallace profile image
brandon_wallace

Nice article. Keep up the good work brother. An alternative to hard coding quotes is to query quotes from an API. You will be able to get a much larger selection.

Collapse
 
stackfindover profile image
Stackfindover

Thanks :) You are right, but this is only how we can create simple with the array, also we can use API