Skip to main content

​
Overview

The quote rotator is a dynamic feature that displays random quotes from a curated collection of 183 pop culture references. Spanning movies, video games, TV shows, and more, this system adds personality and engagement to the website.
The quote rotator draws from franchises like Star Wars, Marvel, Lord of the Rings, Metal Gear Solid, Portal, and many more.

​
Key Features

183 Quotes

Extensive collection from movies, games, TV shows, and comics

Random Selection

Each page load or button click displays a new random quote

Attribution

Every quote includes the character or source attribution

Interactive

Users can click a button to generate new quotes on demand

​
Implementation

​
Quote Data Structure

Quotes are stored as an array of objects, each containing the quote text and its author: 
const quotes = [
    { quote: "If it hasn't worked out yet, it's because it's not over yet", author: "MilesONerd" },
    { quote: "Aren't you a little short for a stormtrooper?", author: "Leia Organa" },
    { quote: "I am altering the deal, pray I do not alter it further.", author: "Darth Vader" },
    { quote: "Do... or do not. There is no try.", author: "Yoda" },
    { quote: "With Great Power, Comes Great Responsibility", author: "Spiderman" },
    { quote: "I am Iron Man", author: "Tony Stark" },
    // ... 179 more quotes
];
The array contains exactly 183 quotes from diverse sources across pop culture.

​
Core Functions

The quote rotator consists of two primary functions:
1

Get Random Quote

The getRandomQuote() function selects a random quote from the array.
2

Update Display

The updateQuote() function retrieves a quote and updates the DOM elements.

​
Random Quote Selection

function getRandomQuote() {
    const randomIndex = Math.floor(Math.random() * quotes.length);
    return quotes[randomIndex];
}
This function uses Math.random() to generate a random index within the bounds of the quotes array, ensuring every quote has an equal chance of being selected.

​
DOM Update Function

function updateQuote() {
    const { quote, author } = getRandomQuote();
    document.getElementById('random-quote').innerHTML = `“${quote}”`;
    document.getElementById('quote-author').innerHTML = `—${author}`;
}
The function uses destructuring assignment to extract the quote and author from the returned object, making the code more concise.

​
Event Handling

The quote rotator initializes on page load and responds to user interactions: 
document.addEventListener('DOMContentLoaded', () => {
    updateQuote();
    document.getElementById('another-quote').addEventListener('click', updateQuote);
});
  1. When the DOM is fully loaded, the DOMContentLoaded event fires
  2. updateQuote() is called immediately to display the first quote
  3. A click event listener is attached to the “another-quote” button
  4. Each click triggers updateQuote() to display a new random quote

​
Quote Categories

The collection spans multiple entertainment franchises and genres:

Star Wars

Classic lines from the original and sequel trilogies

Marvel Universe

Quotes from the MCU and comic book heroes

Video Games

Iconic gaming moments from Portal, Metal Gear, Halo, and more

Lord of the Rings

Memorable quotes from Middle-earth

Harry Potter

Wisdom from Dumbledore and other magical characters

Sci-Fi Classics

Quotes from Star Trek, Terminator, The Matrix, and more

​
Example Quotes by Franchise

​
Star Wars Collection

{ quote: "I am altering the deal, pray I do not alter it further.", author: "Darth Vader" }
{ quote: "No. I am your father.", author: "Darth Vader" }
{ quote: "I find your lack of faith disturbing.", author: "Darth Vader" }

​
Gaming Quotes

{ quote: "The cake is a lie.", author: "GLaDOS" }
{ quote: "It's dangerous to go alone, take this!", author: "Old Man" }
{ quote: "War. War never changes.", author: "Narrator" }
{ quote: "Wake me when you need me.", author: "John-117" }
{ quote: "Would you kindly...", author: "Atlas" }
{ quote: "Praise the sun!", author: "Solaire of Astora" }

​
Marvel Cinematic Universe

{ quote: "I am Iron Man", author: "Tony Stark" }
{ quote: "Avengers Assemble!", author: "Captain America" }
{ quote: "I can do this all day", author: "Steve Rogers" }
{ quote: "I love you 3000", author: "Morgan Stark" }
{ quote: "This is the Way", author: "The Mandalorian" }

​
Silent Protagonists

Some of the most iconic video game characters say nothing at all:
{ quote: "...", author: "Gordon Freeman" }
{ quote: "...", author: "Link" }
{ quote: "...", author: "Doomguy" }

​
HTML Structure

The quote rotator requires specific HTML elements to function: 
<div class="quote-container">
    <blockquote id="random-quote"></blockquote>
    <cite id="quote-author"></cite>
    <button id="another-quote">Get Another Quote</button>
</div>
  • #random-quote - Displays the quote text with proper quotation marks
  • #quote-author - Shows the character or source attribution
  • #another-quote - Button that triggers a new random quote

​
Styling Considerations

The quote display uses HTML entities for proper typography:
  • &ldquo; - Left double quotation mark (”)
  • &rdquo; - Right double quotation mark (”)
  • &mdash; - Em dash (—)
document.getElementById('random-quote').innerHTML = `&ldquo;${quote}&rdquo;`;
document.getElementById('quote-author').innerHTML = `&mdash;${author}`;
Using proper HTML entities ensures quotes display correctly across all browsers and devices with professional typography.

​
Statistics

The quote collection includes:
  • 183 total quotes
  • 100+ unique sources (characters, games, movies)
  • 15+ franchises represented
  • Quotes from movies, TV shows, video games, books, and comics

Most Quoted Franchise

Star Wars leads with 20+ quotes from various characters

Longest Quote

“You exist because we allow it, and you will end because we demand it.” - Sovereign

Shortest Quote

”…” - Gordon Freeman, Link, and Doomguy

Personal Quote

“If it hasn’t worked out yet, it’s because it’s not over yet” - MilesONerd

​
File Location

The complete quote rotator implementation can be found at: ~/workspace/source/assets/scripts/quotes.js

​
Usage Example

To integrate the quote rotator into a page:
1

Add HTML Elements

Include the required div container with proper IDs for quote display
2

Include Script

Link to quotes.js before the closing </body> tag
3

Automatic Initialization

The quote rotator automatically initializes on page load
<!DOCTYPE html>
<html>
<head>
    <title>Quote Rotator Demo</title>
</head>
<body>
    <div class="quote-container">
        <blockquote id="random-quote"></blockquote>
        <cite id="quote-author"></cite>
        <button id="another-quote">Get Another Quote</button>
    </div>
    
    <script src="/assets/scripts/quotes.js"></script>
</body>
</html>
The quote rotator requires no external dependencies - it’s pure vanilla JavaScript!

Build docs developers (and LLMs) love

Get started for freeTalk to us