Back to Projects Beginner

Random Quote Generator

Click a button and get an inspiring quote with its author. A fun beginner project that teaches you arrays, objects, and DOM manipulation.

HTML, CSS, JavaScript ~1 hour to build Free source code

What You'll Learn

How to store data in arrays of objects
How to generate a random index with Math.random() and Math.floor()
How to update text content on the page using textContent
How to handle button click events with addEventListener()
How to add smooth CSS transitions when content changes

How It Works

Quotes stored in an array

All quotes and their authors are stored in a JavaScript array of objects. Each object has a text property and an author property.

Random selection on click

When the user clicks the button, Math.random() picks a random index from the array. The quote and author are pulled from that index and displayed on the page.

Smooth fade animation

A CSS transition makes the quote text fade out and back in each time a new quote appears, giving the app a polished feel.

Source Code

HTML Structure

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Random Quote Generator</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="quote-app">
    <h1>Random Quote Generator</h1>
    <p class="subtitle">Click the button for a dose of inspiration</p>
    <p class="quote-text" id="quoteText">Loading...</p>
    <p class="quote-author" id="quoteAuthor"></p>
    <button class="btn-new" id="newQuoteBtn">New Quote</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS Styling

CSS

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  min-height: 100vh; display: flex; align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e65100 0%, #ff6d00 50%, #ff9100 100%);
  font-family: 'Segoe UI', sans-serif;
}
.quote-app {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px; padding: 48px 40px;
  max-width: 560px; width: 90%;
  text-align: center; backdrop-filter: blur(10px);
}
h1 {
  font-size: 1.8rem; font-weight: 800; color: #fff;
  margin-bottom: 6px; letter-spacing: 0.5px;
}
.subtitle {
  font-size: 0.95rem; color: rgba(255,255,255,0.7);
  margin-bottom: 32px;
}
.quote-text {
  font-size: 1.35rem; font-weight: 600; color: #fff;
  line-height: 1.7; min-height: 100px;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.4s ease;
}
.quote-author {
  font-size: 1rem; color: rgba(255,255,255,0.7);
  margin-top: 16px; font-style: italic;
  transition: opacity 0.4s ease; min-height: 1.5em;
}
.btn-new {
  margin-top: 32px; padding: 14px 36px; font-size: 1rem;
  font-weight: 700; border: none; border-radius: 50px;
  cursor: pointer; background: #fff; color: #e65100;
  transition: all 0.3s;
}
.btn-new:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.fade-out { opacity: 0; }

JavaScript Logic

JavaScript

const quotes = [
  { text: "Any fool can write code that a computer can understand. Good programmers write code that humans can understand.", author: "Martin Fowler" },
  { text: "First, solve the problem. Then, write the code.", author: "John Johnson" },
  { text: "Talk is cheap. Show me the code.", author: "Linus Torvalds" },
  { text: "Programs must be written for people to read, and only incidentally for machines to execute.", author: "Harold Abelson" },
  { text: "The best error message is the one that never shows up.", author: "Thomas Fuchs" },
  { text: "Simplicity is the soul of efficiency.", author: "Austin Freeman" },
  { text: "Java is to JavaScript what car is to carpet.", author: "Chris Heilmann" },
  { text: "Code is like humor. When you have to explain it, it is bad.", author: "Cory House" },
  { text: "Fix the cause, not the symptom.", author: "Steve Maguire" },
  { text: "Before software can be reusable it first has to be usable.", author: "Ralph Johnson" }
];

const quoteText = document.getElementById('quoteText');
const quoteAuthor = document.getElementById('quoteAuthor');
const newQuoteBtn = document.getElementById('newQuoteBtn');

function getRandomQuote() {
  const index = Math.floor(Math.random() * quotes.length);
  return quotes[index];
}

function displayQuote() {
  // Fade out current quote
  quoteText.classList.add('fade-out');
  quoteAuthor.classList.add('fade-out');

  setTimeout(function () {
    const quote = getRandomQuote();
    quoteText.textContent = quote.text;
    quoteAuthor.textContent = "- " + quote.author;
    // Fade back in
    quoteText.classList.remove('fade-out');
    quoteAuthor.classList.remove('fade-out');
  }, 400);
}

newQuoteBtn.addEventListener('click', displayQuote);

// Show a quote on page load
displayQuote();