Generate Random Quotes in JavaScript

In this tutorial, we are going to make a Random Quotes Generator using Javascript and a little touch of CSS for styling. This is very easy and there is no worry if you are new to this because it is for absolute beginners. Here I’m gonna use the Brackets text editor, it’s totally up to you to use any text editor of your choice.

So let’s start without any delay.

First, you gotta make a folder and name it ‘quotegenerator‘. Now open your text editor and open a new file and save it as ‘index.html’ in this folder.
Write this basic HTML code in the HTML file that you just created:

<!DOCTYPE html>
<html>
<head>
    <title>Quote Gen</title>
    </head>
<body>
    <h1>"QUOTES"</h1>
    <div id="quoteDisplay">
    </div>
    <button onclick="newQuote()">New Quote</button>
    <script src="javascript.js"></script>
    </body>
</html>

Here,

<button onclick=”newQuote()”>New Quote</button>

This will create a button which on clicking will show a new quote.

<script src=”javascript.js”></script>

This will link (or include) our javascript file with HTML file but we don’t have our javascript file yet.

Hence open a new file in the text editor and save it as ‘javacsript.js’ in our folder and write the following code:

var quotes = [
    'Demo Quote 1',
    'Demo Quote 2',
    'Demo Quote 3',
    'Demo Quote 4',
     'Demo Quote 5',
     'Demo Quote 6',
    
    
]
function newQuote() {
    var randomNumber = Math.floor(Math.random() * (quotes.length));
    document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
    
}

Here I have shown demo quotes. You can write as you wish and as much as you want. Or if you wish you can use API call also.

Now if you want to style this page then you can use CSS:

Open a new file in the text editor and save it as ‘styling.css’ in our folder and write the following code:

body{
    
     font-family: "Lucida Console", Courier, monospace;
   background-image:  url("image.jpg");
    

}
h1{
      text-align: center;
    text-decoration: underline;
    color: snow;
    margin: 30px 0 50px; 
    text-shadow: 2px 2px gray;    
}

div {
  height: 100px;
  width: 500px;
  background-color:cornsilk;
}

For the body of our page, I have used the font of my choice and an image as a background you can change them as you wish.
For heading h1, you can see I did use alignment, decoration, shadow, color, and margin of text.
And for div, I have made a box in which quotes will display using height, weight, and background color.

At last include this CSS file in our HTML file by:

<link rel=”stylesheet” type=”text/css” href=”styling.css”>

Your overall HTML code will look like this:

<!DOCTYPE html>
<html>
<head>
    <title>Quote Gen</title>
    
         <link rel="stylesheet" type="text/css" href="styling.css">
    </head>
<body>
    <h1>"QUOTES"</h1>
    <div id="quoteDisplay">
    </div>
    <button onclick="newQuote()">New Quote</button>
    <script src="javascript.js"></script>
    </body>
</html>

Hence our Random Quotes Generator is ready!

Generate Random Quotes in JavaScript

Leave a Reply Cancel reply

Related Posts