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.
Leave a Reply