Lesson 7.4 – Random Quote Generator

🚀 Building a Random Quote Generator Using HTML, CSS & JavaScript

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Create a Random Quote Generator

✅ Understand Arrays

✅ Generate Random Numbers

✅ Use Math.random()

✅ Use Functions

✅ Use DOM Manipulation

✅ Build Interactive JavaScript Projects

📖 Introduction

Many websites display motivational quotes.

Examples:

 
Success is not final, failure is not fatal.
 
 
Never stop learning.
 
 
Dream big and work hard.
 

Every time the user clicks a button:

A new quote appears.

Today we will create:

💬 Random Quote Generator

🌟 Project Preview

 
-------------------------

Random Quote Generator

"Dream Big, Work Hard"

[ New Quote ]

-------------------------
 

When the button is clicked:

A new random quote appears.

🎯 Concepts Used

Concept Used
Arrays ✅
Variables ✅
Functions ✅
Events ✅
DOM Manipulation ✅
Random Numbers ✅

🗂️ Project Files

Create:

index.html

style.css

script.js

🎯 Step 1 – Create HTML Structure

index.html

<!DOCTYPE html>

<html>

<head>

<title>Random Quote Generator</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="container">

<h1>

Random Quote Generator

</h1>

<p id="quote">

Click the button to generate a quote

</p>

<button onclick="generateQuote()">

New Quote

</button>

</div>

<script src="script.js"></script>

</body>

</html>

🌟 Understanding HTML

Quote Area:

<p id="quote">

Displays quotes.

Button:

<button onclick="generateQuote()">

Generates a new quote.

🎯 Step 2 – Design the Project

style.css

body{

font-family:Arial;

background:#f4f4f4;

display:flex;

justify-content:center;

align-items:center;

height:100vh;

}

.container{

background:white;

padding:30px;

width:500px;

text-align:center;

border-radius:10px;

box-shadow:0 0 15px lightgray;

}

h1{

color:#0d6efd;

}

#quote{

font-size:22px;

margin:20px 0;

color:#333;

}

button{

padding:10px 20px;

background:#0d6efd;

color:white;

border:none;

border-radius:5px;

cursor:pointer;

}

button:hover{

background:#084298;

}

🎯 Step 3 – What is an Array?

An Array stores multiple values in a single variable.

Example:

let fruits =

["Apple","Mango","Banana"];

Output:

 
Apple

Mango

Banana
 

stored in one variable.

🌟 Creating Quotes Array

script.js

let quotes =

[

"Dream Big and Work Hard",

"Success Comes Through Consistency",

"Never Stop Learning",

"Believe In Yourself",

"Stay Positive Stay Strong",

"Practice Makes Perfect",

"Every Day Is A New Opportunity",

"Focus On Your Goals"

];

🎯 Understanding Array Index

 
quotes[0]
 

Output:

 
Dream Big and Work Hard
 
 
quotes[1]
 

Output:

 
Success Comes Through Consistency
 
 
quotes[2]
 

Output:

 
Never Stop Learning
 

🌟 Generating Random Numbers

JavaScript provides:

 
Math.random()
 

Example:

 
Math.random();
 

Output:

 
0.52

0.84

0.12

0.67
 

Random every time.

🎯 Generate Random Array Index

Math.floor(

Math.random() * quotes.length

);

Suppose:

 
quotes.length = 8
 

Output:

 
0

1

2

3

4

5

6

7
 

Randomly.

🌟 Create Function

function generateQuote()
{

}

Runs when button is clicked.

🎯 Generate Random Index

let randomIndex =

Math.floor(

Math.random() * quotes.length

);

Example Output:

 
3
 

🌟 Get Quote From Array

let randomQuote =

quotes[randomIndex];

Example:

 
Believe In Yourself
 

🎯 Display Quote

document.getElementById("quote").innerHTML =

randomQuote;

Output:

Random quote appears.

🌟 Complete JavaScript Code

script.js

let quotes =

[

"Dream Big and Work Hard",

"Success Comes Through Consistency",

"Never Stop Learning",

"Believe In Yourself",

"Stay Positive Stay Strong",

"Practice Makes Perfect",

"Every Day Is A New Opportunity",

"Focus On Your Goals"

];

function generateQuote()
{

let randomIndex =

Math.floor(

Math.random() * quotes.length

);

let randomQuote =

quotes[randomIndex];

document.getElementById("quote").innerHTML =

randomQuote;

}

💻 Complete Project Code

index.html

<!DOCTYPE html>

<html>

<head>

<title>Random Quote Generator</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="container">

<h1>

Random Quote Generator

</h1>

<p id="quote">

Click the button to generate a quote

</p>

<button onclick="generateQuote()">

New Quote

</button>

</div>

<script src="script.js"></script>

</body>

</html>

script.js

let quotes =

[

"Dream Big and Work Hard",

"Success Comes Through Consistency",

"Never Stop Learning",

"Believe In Yourself",

"Stay Positive Stay Strong",

"Practice Makes Perfect",

"Every Day Is A New Opportunity",

"Focus On Your Goals"

];

function generateQuote()
{

let randomIndex =

Math.floor(

Math.random() * quotes.length

);

let randomQuote =

quotes[randomIndex];

document.getElementById("quote").innerHTML =

randomQuote;

}

🎯 Expected Output

Click Button:

 
New Quote
 

Output Example:

 
Dream Big and Work Hard
 

Next Click:

 
Stay Positive Stay Strong
 

Next Click:

 
Never Stop Learning
 

🌟 Add Quote Author

Modify Array:

let quotes =

[

"Dream Big and Work Hard - Shiv",

"Believe In Yourself - APJ Abdul Kalam",

"Never Stop Learning - Unknown",

"Stay Positive - Motivational Quote"

];

Output:

 
Believe In Yourself - APJ Abdul Kalam
 

🌟 Add Random Background Color

let colors =

["red","blue","green","purple","orange"];

Inside Function:

document.body.style.backgroundColor =

colors[
Math.floor(
Math.random()*colors.length
)
];

Each quote changes background color.

🏫 Real World Applications

Random Quote Generators are used in:

✅ Motivational Websites

✅ Learning Platforms

✅ Mobile Apps

✅ Wellness Apps

✅ Productivity Tools

✅ Educational Websites

⚠️ Common Beginner Mistakes

Mistake 1

Forgetting Array Brackets

Wrong:

let quotes =
"Quote 1",
"Quote 2";

Correct:

let quotes =
[
"Quote 1",
"Quote 2"
];

Mistake 2

Wrong Element ID

document.getElementById("quote")

Must match HTML ID.

Mistake 3

Missing Math.floor()

Can create decimal indexes.

Wrong:

quotes[Math.random()*quotes.length]

Correct:

quotes[
Math.floor(
Math.random()*quotes.length
)
]

🌟 Best Practices

✅ Use meaningful quotes.

✅ Keep array organized.

✅ Use proper variable names.

✅ Test random generation multiple times.

✅ Separate HTML, CSS, and JavaScript files.

🏆 Project Challenge

Modify the project and add:

✅ Quote Author

✅ Random Background Colors

✅ Previous Quote Button

✅ Quote Counter

✅ Auto Quote Change Every 5 Seconds

📝 Practical Activity

Create:

Study Motivation Generator

Add 10 motivational quotes for students.

Display a random quote every time the button is clicked.

📋 Assignment

Assignment 7.4

  1. What is an Array?
  2. What does Math.random() do?
  3. What does Math.floor() do?
  4. How does the Random Quote Generator work?
  5. Create a Quote Generator project.
  6. Add Quote Authors.
  7. Add Random Background Colors.

🧠 Quiz

Q1. Which data structure stores multiple values?

A. Variable

B. Array

C. Function

D. Event

✅ Answer: B

Q2. Which function generates random numbers?

A. random()

B. generate()

C. Math.random()

D. Math.number()

✅ Answer: C

Q3. Which function removes decimal values?

A. round()

B. ceil()

C. floor()

D. random()

✅ Answer: C

Q4. Which concept is mainly used in this project?

A. Array

B. DOM Manipulation

C. Functions

D. All of These

✅ Answer: D

Q5. What is the purpose of the quote array?

A. Store Colors

B. Store Quotes

C. Store Images

D. Store Buttons

✅ Answer: B

📌 Lesson Summary

✅ Built a Random Quote Generator.

✅ Learned Arrays.

✅ Used Math.random() and Math.floor().

✅ Applied DOM Manipulation.

✅ Created an interactive JavaScript project.

PreviousNext