How to Build a Random Quote Generator with JavaScript (Beginner Tutorial)

Build a Random Quote Generator with JavaScript

Want a fun first project to practice JavaScript? In this tutorial, you'll build a Random Quote Generator a button that shows a new motivational quote every time you click it.

It looks simple, but it touches four ideas you'll use in almost every JavaScript project you ever build: storing data, selecting HTML elements, listening for events, and updating the page. By the end, you won't just have a working widget you'll understand why every line of code is there.

What You'll Learn

• How to store multiple pieces of data in a JavaScript array
• How to generate a random number with Math.random()
• How to select HTML elements in JavaScript with getElementById()
• How to listen for clicks with addEventListener()
• How to update text on the page with textContent

How It Works (The Big Picture)

Before we touch any code, here's the plan in plain English:

1. We'll have a paragraph (<p>) that displays a quote, and a button below it.
2. We'll store a list of quotes in JavaScript.
3. When the button is clicked, JavaScript will pick a random quote from that list and swap it into the paragraph.

That's the whole project. Three steps. Let's build it.

Step 1: The HTML

This is the structure of our project just a container, a paragraph for the quote, and a button.

<div class="quote-box">
  <p id="quote">Click the button to get a quote!</p>
  <button id="quoteBtn">New Quote</button>
</div>

A couple of things worth noticing:

• The paragraph has id="quote" this is how JavaScript will find it later. Think of an id as a unique name tag for an element.
• The button has id="quoteBtn" for the same reason we need a way to "grab" it from JavaScript.

If you're new to HTML: an id doesn't do anything by itself. It's just a label. The magic happens when JavaScript reads that label.

Step 2: The CSS

Just enough styling to center things and make the button feel clickable.

.quote-box {
  text-align: center;
  padding: 20px;
}

button {
  padding: 10px 20px;
  cursor: pointer;
}

cursor: pointer is a small detail that makes the mouse turn into a hand icon when hovering over the button a subtle cue that it's clickable.

Step 3: The JavaScript

This is where the project actually comes to life. Let's build it piece by piece.

3.1 Store the quotes in an array

const quotes = [
  "Success starts with taking the first step.",
  "Practice makes progress.",
  "Every expert was once a beginner.",
  "Small daily improvements lead to big results.",
  "Keep learning and keep growing.",
  "Consistency beats perfection.",
  "Your future is created by what you do today.",
  "Mistakes are proof that you are trying.",
  "Learning never exhausts the mind.",
  "Great things take time.",
  "Stay curious and keep exploring.",
  "Believe in yourself and your abilities.",
  "Code, learn, improve, repeat.",
  "Hard work opens new opportunities.",
  "The best way to learn is by building projects.",
  "Success is the sum of small efforts repeated daily.",
  "Don't be afraid to start small.",
  "Progress is progress, no matter how small.",
  "Dream big and work hard.",
  "Every day is a chance to learn something new.",
  "Focus on improvement, not perfection.",
  "Challenges help you grow stronger.",
  "The journey of a thousand miles begins with one step.",
  "Knowledge becomes power when applied.",
  "Keep moving forward.",
  "Patience and persistence pay off.",
  "Your only limit is your mindset.",
  "Stay positive and work hard.",
  "Growth begins outside your comfort zone.",
  "Success comes to those who never give up."
];

An array is just a list. Each quote sits at a position, called an index, starting from 0. So quotes[0] is "Success starts with taking the first step.", quotes[1] is "Practice makes progress.", and so on. We'll use this fact in a moment.

3.2 Grab the HTML elements

const quoteElement = document.getElementById("quote");
const quoteBtn = document.getElementById("quoteBtn");

Remember those ids from the HTML? This is where they're used. document.getElementById("quote") searches the whole page for an element with id="quote" and hands it back to us so we can control it from JavaScript. We do the same for the button.

Now quoteElement and quoteBtn are variables that point directly at those two HTML elements.

3.3 Listen for the click

quoteBtn.addEventListener("click", function () {
  const randomIndex = Math.floor(Math.random() * quotes.length);
  quoteElement.textContent = quotes[randomIndex];
});

Let's break this into two parts.

The listener itself:

quoteBtn.addEventListener("click", function () {
  // code here runs every time the button is clicked
});

addEventListener("click", ...) tells the browser: "watch this button, and whenever someone clicks it, run this function." The function doesn't run when the page loads only on click.

Picking a random quote:

const randomIndex = Math.floor(Math.random() * quotes.length);

This is the trickiest line in the whole project, so let's slow down:

• Math.random() returns a random decimal between 0 and 1 (like 0.732...), never exactly 1.
• quotes.length is the number of quotes in our array — 30.
• Multiplying them gives a random decimal between 0 and 30 (but not quite 30).
• Math.floor() rounds that number down to the nearest whole number, giving us a valid index like 0, 1, 2, ... up to 29.

This guarantees randomIndex always lands on a real position in the array — never out of bounds.

Updating the page:

quoteElement.textContent = quotes[randomIndex];

textContent is the text inside an element. By setting quoteElement.textContent to quotes[randomIndex], we're replacing whatever the paragraph currently says with our randomly picked quote.

Try It Live

Here's the finished project, working right on this page. Click the button a few times!

Click the button to get a quote!

Putting It All Together

Here's the complete project in one place:

<div class="quote-box">
  <p id="quote">Click the button to get a quote!</p>
  <button id="quoteBtn">New Quote</button>
</div>

.quote-box {
  text-align: center;
  padding: 20px;
}

button {
  padding: 10px 20px;
  cursor: pointer;
}

const quotes = [
  "Success starts with taking the first step.",
  "Practice makes progress.",
  "Every expert was once a beginner.",
  // ...the rest of the quotes from above
];

const quoteElement = document.getElementById("quote");
const quoteBtn = document.getElementById("quoteBtn");

quoteBtn.addEventListener("click", function () {
  const randomIndex = Math.floor(Math.random() * quotes.length);
  quoteElement.textContent = quotes[randomIndex];
});

Try It Yourself: 3 Challenges

Once it's working, push yourself a bit further with these:

1. Add authors. Change each quote into an object like { text: "...", author: "..." }, then display both the quote and the author.
2. No repeats. Right now the same quote can show twice in a row. Add a check so a new random quote is picked until it's different from the current one.
3. Add a fade effect. Use CSS transitions (or a simple opacity toggle in JavaScript) so the quote fades out and back in when it changes, instead of changing instantly.

What You Learned

By building this small project, you practiced five core JavaScript skills you'll reuse constantly:

• Storing related data together in an array
• Reaching into the page with getElementById()
• Reacting to user actions with addEventListener()
• Generating randomness with Math.random() and Math.floor()
• Changing what's on screen with textContent

None of these are "beginner-only" tricks they're the same building blocks used in much larger apps. The Random Quote Generator is just a small, satisfying way to see them work together.