Html,Css and Javascript Code for "Random Quote Generator: Display a New Quote Every Click"

Random Quote Generator: Display a New Quote Every Click

What you are building

A Random Quote Generator shows a new quote every time the visitor presses a button. It is a small project, but it touches all three front-end languages at once, which makes it a good first thing to build.

The three parts

1. HTML lays out the elements the visitor sees and gives them IDs so the script can find them.
2. CSS handles colour, spacing and the button states.
3. JavaScript picks a random item from an array and writes it into the page.

Live demo

Press the button to see a quote.

The full code

Everything below is one self-contained file. Copy it into a .html file, or into a Blogger HTML widget, and it runs as-is.

<!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, Helvetica, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f4f4f4;
  }

  #quote-box {
    text-align: center;
    background: #fff;
    padding: 24px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 440px;
  }

  #quote {
    font-size: 1.2em;
    margin-bottom: 15px;
  }

  #author {
    font-style: italic;
    color: #555;
    min-height: 1.6em;
  }

  button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
  }

  button:hover,
  button:focus-visible {
    background-color: #0056b3;
  }
</style>
</head>
<body>

<div id="quote-box">
  <p id="quote">Press the button to see a quote.</p>
  <p id="author"></p>
  <button type="button" id="new-quote">New quote</button>
</div>

<script>
  var quotes = [
    { "text": "The only limit to our realization of tomorrow is our doubts of today.", "author": "Franklin D. Roosevelt" },
    { "text": "Do not wait to strike till the iron is hot; but make it hot by striking.", "author": "William Butler Yeats" },
    { "text": "Whether you think you can or think you can't, you're right.", "author": "Henry Ford" },
    { "text": "I have not failed. I've just found 10,000 ways that won't work.", "author": "Thomas Edison" },
    { "text": "Success is not final, failure is not fatal: it is the courage to continue that counts.", "author": "Winston Churchill" },
    { "text": "The best way to predict your future is to create it.", "author": "Peter Drucker" },
    { "text": "Believe you can and you're halfway there.", "author": "Theodore Roosevelt" },
    { "text": "Act as if what you do makes a difference. It does.", "author": "William James" },
    { "text": "The best way to predict the future is to invent it.", "author": "Alan Kay" },
    { "text": "Life is 10% what happens to us and 90% how we react to it.", "author": "Charles R. Swindoll" },
    { "text": "Your time is limited, don't waste it living someone else's life.", "author": "Steve Jobs" },
    { "text": "Success usually comes to those who are too busy to be looking for it.", "author": "Henry David Thoreau" },
    { "text": "The only place where success comes before work is in the dictionary.", "author": "Vidal Sassoon" },
    { "text": "Opportunities don't happen. You create them.", "author": "Chris Grosser" },
    { "text": "Don't be afraid to give up the good to go for the great.", "author": "John D. Rockefeller" },
    { "text": "I find that the harder I work, the more luck I seem to have.", "author": "Thomas Jefferson" },
    { "text": "Success is not in what you have, but who you are.", "author": "Bo Bennett" },
    { "text": "Your limitation is only your imagination.", "author": "Anonymous" },
    { "text": "Push yourself, because no one else is going to do it for you.", "author": "Anonymous" },
    { "text": "Great things never come from comfort zones.", "author": "Anonymous" },
    { "text": "Dream it. Wish it. Do it.", "author": "Anonymous" },
    { "text": "The harder you work for something, the greater you'll feel when you achieve it.", "author": "Anonymous" },
    { "text": "Don't stop when you're tired. Stop when you're done.", "author": "Anonymous" },
    { "text": "Wake up with determination. Go to bed with satisfaction.", "author": "Anonymous" },
    { "text": "Do something today that your future self will thank you for.", "author": "Anonymous" },
    { "text": "Little things make big days.", "author": "Anonymous" },
    { "text": "It's going to be hard, but hard does not mean impossible.", "author": "Anonymous" },
    { "text": "Sometimes we're tested not to show our weaknesses, but to discover our strengths.", "author": "Anonymous" },
    { "text": "The key to success is to focus on goals, not obstacles.", "author": "Anonymous" },
    { "text": "Dream bigger. Do bigger.", "author": "Anonymous" },
    { "text": "You don't have to be great to start, but you have to start to be great.", "author": "Zig Ziglar" },
    { "text": "Do what you can with all you have, wherever you are.", "author": "Theodore Roosevelt" },
    { "text": "The future belongs to those who believe in the beauty of their dreams.", "author": "Eleanor Roosevelt" },
    { "text": "Creativity is intelligence having fun.", "author": "Albert Einstein" },
    { "text": "What you get by achieving your goals is not as important as what you become by achieving your goals.", "author": "Zig Ziglar" },
    { "text": "Start where you are. Use what you have. Do what you can.", "author": "Arthur Ashe" },
    { "text": "Success is the sum of small efforts, repeated day in and day out.", "author": "Robert Collier" },
    { "text": "If you want to achieve greatness, stop asking for permission.", "author": "Anonymous" },
    { "text": "Things work out best for those who make the best of how things work out.", "author": "John Wooden" },
    { "text": "To live a creative life, we must lose our fear of being wrong.", "author": "Anonymous" },
    { "text": "If you are not willing to risk the usual, you will have to settle for the ordinary.", "author": "Jim Rohn" },
    { "text": "Trust because you are willing to accept the risk, not because it's safe or certain.", "author": "Anonymous" },
    { "text": "All our dreams can come true if we have the courage to pursue them.", "author": "Walt Disney" },
    { "text": "Good things come to people who wait, but better things come to those who go out and get them.", "author": "Anonymous" },
    { "text": "If you do what you always did, you will get what you always got.", "author": "Anonymous" },
    { "text": "Success is walking from failure to failure with no loss of enthusiasm.", "author": "Winston Churchill" },
    { "text": "Just when the caterpillar thought the world was ending, he turned into a butterfly.", "author": "Proverb" },
    { "text": "Successful entrepreneurs are givers and not takers of positive energy.", "author": "Anonymous" },
    { "text": "Whenever you see a successful person you only see the public glories, never the private sacrifices to reach them.", "author": "Vaibhav Shah" },
    { "text": "Try not to become a person of success, but rather try to become a person of value.", "author": "Albert Einstein" },
    { "text": "It is not the strongest of the species that survive, nor the most intelligent, but the one most responsive to change.", "author": "Charles Darwin" },
    { "text": "The best revenge is massive success.", "author": "Frank Sinatra" },
    { "text": "A successful man is one who can lay a firm foundation with the bricks others have thrown at him.", "author": "David Brinkley" },
    { "text": "No one can make you feel inferior without your consent.", "author": "Eleanor Roosevelt" },
    { "text": "The whole secret of a successful life is to find out what is one's destiny to do, and then do it.", "author": "Henry Ford" },
    { "text": "If you're going through hell, keep going.", "author": "Winston Churchill" },
    { "text": "Don't raise your voice, improve your argument.", "author": "Anonymous" },
    { "text": "What seems to us as bitter trials are often blessings in disguise.", "author": "Oscar Wilde" },
    { "text": "The meaning of life is to find your gift. The purpose of life is to give it away.", "author": "Anonymous" },
    { "text": "The distance between insanity and genius is measured only by success.", "author": "Bruce Feirstein" },
    { "text": "When you stop chasing the wrong things you give the right things a chance to catch you.", "author": "Lolly Daskal" },
    { "text": "Don't be afraid to stand for what you believe in, even if that means standing alone.", "author": "Anonymous" },
    { "text": "Build your own dreams, or someone else will hire you to build theirs.", "author": "Farrah Gray" },
    { "text": "The only way to do great work is to love what you do.", "author": "Steve Jobs" },
    { "text": "If you can't explain it simply, you don't understand it well enough.", "author": "Albert Einstein" },
    { "text": "Don't worry about failure; you only have to be right once.", "author": "Drew Houston" },
    { "text": "The best way to get started is to quit talking and begin doing.", "author": "Walt Disney" },
    { "text": "The people who are crazy enough to think they can change the world are the ones who do.", "author": "Anonymous" },
    { "text": "The harder you work, the luckier you get.", "author": "Gary Player" }
  ];

  var quoteEl = document.getElementById("quote");
  var authorEl = document.getElementById("author");
  var lastIndex = -1;

  function generateQuote() {
    var index = Math.floor(Math.random() * quotes.length);

    // Avoid repeating the quote that is already on screen.
    if (quotes.length > 1) {
      while (index === lastIndex) {
        index = Math.floor(Math.random() * quotes.length);
      }
    }

    lastIndex = index;
    quoteEl.textContent = quotes[index].text;
    authorEl.textContent = "\u2014 " + quotes[index].author;
  }

  document.getElementById("new-quote").addEventListener("click", generateQuote);
</script>

</body>
</html>

How each part works

1. HTML: the structure

Three elements do all the work. A paragraph with id="quote" holds the quote text, a second paragraph with id="author" holds the attribution, and a button triggers the change. The IDs matter because they are how JavaScript locates the elements it needs to update.

2. CSS: the appearance

The card gets padding, rounded corners and a soft shadow so it reads as a distinct panel. Flexbox on body centres it in the viewport. The button has a hover state and a :focus-visible state, so it responds to a mouse and to keyboard tabbing.

3. JavaScript: the behaviour

The quotes live in an array of objects, each with a text and an author. Math.random() returns a decimal between 0 and 1; multiplying by quotes.length and passing the result through Math.floor() gives a valid array index. Writing to textContent then swaps the text in the page.

Two details worth copying into your own projects. First, the click is wired with addEventListener rather than an inline onclick attribute, which keeps behaviour out of the markup. Second, the script remembers the last index it used and re-rolls if it lands on the same one, so a click never appears to do nothing.

Ways to extend it

Categories. Add a category field to each object and filter the array before picking.
Animation. Toggle a CSS class on the card to fade the new quote in.
A live API. Replace the array with fetch() against a quotes API so the list is never exhausted.
Sharing. Build an X or Bluesky share link from the current quote text.