Random Quote Generator - A small javascript project

July 05, 2022

Random Quote Generator - A small javascript project

Random Quote Generator

A Random Quote Generator is capable of pulling quotes randomly using Math Library.

The web page displays a random quote from a collection and upon the click of a button, it randomly generates a new quote.

Step 1: To Create HTML File.

In HTML file we have to link javascript file so that our javascript code will be able interact with the HTML document.

We will also add text within the <title> tags, add an <h1> element, create a <div> element with an id name of quoteDisplay, and also a <button> element with an onclick attribute with "newQuote()" passed into it.

Step 2: To Create Javascript File

var quotes=[
'The purpose of our lives is to be happy',
'Life is what happens when you’re busy making other plans',
'Get busy living or get busy dying',
'You only live once, but if you do it right, once is enough',
'Many of life’s failures are people who did not realize how close they were to success when they gave up',
'If you want to live a happy life, tie it to a goal, not to people or things',
'Never let the fear of striking out keep you from playing the game',
'Money and success don’t change people; they merely amplify what is already there',
'In order to write about life first you must live it',
'The big lesson in life, baby, is never be scared of anyone or anything',
'The unexamined life is not worth living',
'Turn your wounds into wisdom',
'Don’t settle for what life gives you; make life better and build something',
'I like criticism. It makes you strong',
'Live for each second without hesitation'
]

function newQuote(){
var randomNumber=Math.floor(Math.random() * (quotes.length));
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}

In this file, I googled "Best Quotes", and copied 15 quotes, then placed in an array separated by commas.

Make sure you place your quotes in single or double quotation marks.

Now we need to create newQuote() function, in that we need to generate a random whole number that ranges from 0 to the length of our quotes array.

Now we need to use to use the value of randomNumber to randomly retrieve a quote from the quotes array and place the quote into our HTML document and display it to our users.

MISSION COMPLETED✌

To decorate the CSS file, comment on the post

THANKS FOR READING AND HAPPY CODING💜

Search This Blog

TheHouseOfIT

Random Quote Generator - A small javascript project

Comments

Post a Comment

Popular Posts

Data Cleaning in Python with steps - Part 2

Activation Functions in Neural Networks