The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Build a random quote generator

Written by

Bernardo Palos

in

Here’s a simple example of a random quote generator written in JavaScript. This can be embedded on a website to display a new quote each time the user clicks a button or refreshes the page.

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Random Quote Generator</title>
<style>
  body {
    font-family: Arial, sans-serif;
    max-width: 600px;
    margin: 50px auto;
    text-align: center;
    background: #f0f0f0;
    padding: 30px;
    border-radius: 10px;
  }
  #quote {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #333;
  }
  #author {
    font-style: italic;
    margin-bottom: 30px;
    color: #555;
  }
  button {
    padding: 10px 20px;
    font-size: 1rem;
    background-color: #0078d7;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  button:hover {
    background-color: #005fa3;
  }
</style>
</head>
<body>

<div id="quote">Click the button to generate a quote!</div>
<div id="author"></div>
<button onclick="generateQuote()">New Quote</button>

<script>
  const quotes = [
    { quote: "The best way to get started is to quit talking and begin doing.", author: "Walt Disney" },
    { quote: "Don't let yesterday take up too much of today.", author: "Will Rogers" },
    { quote: "It's not whether you get knocked down, it's whether you get up.", author: "Vince Lombardi" },
    { quote: "If you are working on something exciting, it will keep you motivated.", author: "Unknown" },
    { quote: "Success is not in what you have, but who you are.", author: "Bo Bennett" },
    { quote: "Your limitation—it’s only your imagination.", author: "Unknown" },
    { quote: "Push yourself, because no one else is going to do it for you.", author: "Unknown" },
    { quote: "Great things never come from comfort zones.", author: "Unknown" },
  ];

  function generateQuote() {
    const randomIndex = Math.floor(Math.random() * quotes.length);
    const randomQuote = quotes[randomIndex];
    document.getElementById("quote").textContent = `"${randomQuote.quote}"`;
    document.getElementById("author").textContent = `- ${randomQuote.author}`;
  }
</script>

</body>
</html>

This code creates a clean, simple interface that shows a quote and author, and a button that, when clicked, picks a new random quote from the array and displays it.

You can expand the quotes array with your own favorite quotes to customize it.

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About