Quote of the day Project in JavaScript and HTML

In this post let’s learn how to completely implement the Quote of the day project in HTML using JavaScript. Here you will see all the required HTML and JS code that you can follow and run on your browser.

JavaScript Quote of the day Project

To implement this project all we need is basic information about HTML and JavaScript.
Anyway, we will be covering all the required ingredients in this post.

To implement this project we will be needing a basic HTML frame, in which we can put our JavaScript logic.

For now we need a basic HTML page with a button in it, whenever we click that button, we should be able to generate random quotes.
So first let’s create it.

Creating a basic HTML page

<!DOCTYPE html>
<html>
<body>
   <button>Click here to generate quotes</button>
</body>
</html>

The above code will create a basic HTML page with a button, Note that the button doesn’t have any action as of now.
So nothing will happen even if we click it.

JavaScript logic to generate random quotes

As of now, we have an HTML page ready with a button in it.
Now let’s work about how we are going to generate the quotes.
When it comes to HTML, the best and most used scripting language is JavaScript, because it has a huge community and lots of methods, also it gets constant updates.

Before diving into the code directly, let’s look at some functions and data structures that we will be using further in this post.

Arrays in JavaScript

If you are a bit into programming you would have already heard about arrays.
An array is a type of data structure that can hold more than one element in it, In other words it can contain a group of variables of the same type.

In JavaScript we can create Arrays in two ways

We can directly create an Array by specifying values. Look at the code below
```
var numbers = [1,2,3,4,5];
```
We can create an array and allocate memory to it using the new operator, Observe the example below.
```
var numbers=new Array()
```

Both ways are fine, either way we would be creating an array

The elements in an array can be accessed by its index.
numbers[0] would give the first element of the array.
numbers[1] would give us the second element of the array, and so on.

Math.Random() function

Now assume we have an array of quotes with us, how do we generate quotes from it?

For this, we use a method that is available in the JavaScript math library called Math.Random().
This function should be self-explanatory, it basically generates a random number from 0 to an upper limit which we need to specify.

So we will use this function to generate a random index and then output that corresponding quote.

Now we have all the prerequisites that we need for or project, let’s look at the JavaScript code to the above

function thoughts_authors() {

//Array to store author names 
   var authors=new Array() 
   authors[0] = " Albert Einstein"; 
   authors[1] = "Frank Zappa";
   authors[2] = "Marcus Tullius Cicero";
   authors[3] = "Mahatma Gandhi";
   
//Array to store the quotes
   var quotes=new Array()
   quotes[0] = "Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.";
   quotes[1] = "So many books, so little time."; 
   quotes[2] = "A room without books is like a body without a soul.";
   quotes[3] = "Be the change that you wish to see in the world."; 

//Generating index of a random quote
   index = Math.floor(Math.random() * quotes.length);

//Using the alert function to create a pop-up of the quote 
   alert(quotes[index]+ "\n" + "-" + authors[index]);
}

We created an array called authors, we stored the names of 4 authors in there.
Then we created an array called quotes to store the quotes.
We used the Math.random() function, since we specified the upper limit as quotes.length(), it generates numbers between 0 and 4(4 is the size of the array).

We store the generated number in a variable and use that as index to get a random quote from our quotes array.

Now all that’s left is to insert our JavaScript code into the HTML page we created earlier, we do that using the <script> tag.

Code to implement Quote of the Day using JavaScript

<!DOCTYPE html>
<html>
<body >

    <h1>Generating Quotes</h1>


    <script>
    function thoughts_authors() {
    
  //Array to store author names 
    var authors=new Array() 
    authors[0] = " Albert Einstein"; 
    authors[1] = "Frank Zappa";
    authors[2] = "Marcus Tullius Cicero";
    authors[3] = "Mahatma Gandhi";
    
  //Array to store the quotes
    var quotes=new Array()
    quotes[0] = "Two things are infinite: the universe and human stupidity; and I'm not sure about the      universe.";
    quotes[1] = "So many books, so little time."; 
    quotes[2] = "A room without books is like a body without a soul.";
    quotes[3] = "Be the change that you wish to see in the world."; 

  //Generating index of a random quote
    index = Math.floor(Math.random() * quotes.length);

  //Using the alert function to create a pop-up of the quote 
    alert(quotes[index]+ "\n" + "-" + authors[index]);
 }
    </script>

<button onclick="thoughts_authors()">click here to generate a quote</button>

</body>
</html>

Run the code and you can see that a random quote is generated in the form of a pop-up.

Quote of the day Project in JavaScript and HTML

JavaScript Quote of the day Project

Creating a basic HTML page

JavaScript logic to generate random quotes

Code to implement Quote of the Day using JavaScript

Leave a Reply Cancel reply