Random Quote Generator

Goals

• Store data in an array of strings
• Generate a random index with Math.random and Math.floor
• Update DOM text from an event handler
• Avoid repeating the same quote twice in a row

Prerequisites

• Arrays and index access
• Functions
• DOM selection and event listeners

Steps

2. 1

   Store the quotes

   Create an array of at least five short quotes. Keeping the data separate from the logic makes it easy to add more later.

   CodeCopy

   const quotes = [
     "Stay curious.",
     "Small steps every day.",
     "Done is better than perfect.",
     "Read the error message.",
     "Make it work, then make it good.",
   ];

   Expected result

   An array of five strings is ready in memory.

4. 2

   Pick a random quote

   Write a function randomQuote() that returns a random element. Math.random() gives a number in [0,1); multiply by the array length and floor it to get a valid index.

   CodeCopy

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

   Expected result

   Calling randomQuote() returns one of the five strings, different each time.

   Show hint
6. 3

   Wire the button

   Select the quote element and the button. On click, call randomQuote() and set the element's textContent. This connects the data to the UI.

   CodeCopy

   const quoteEl = document.getElementById("quote");
   const btn = document.getElementById("new-quote");
   
   btn.addEventListener("click", () => {
     quoteEl.textContent = randomQuote();
   });

   Expected result

   Each click shows a new random quote on the page.

8. 4

   Avoid repeating the same quote

   Keep track of the current quote and, if the new one matches, pick again. This small loop guarantees the user always sees a change when they click.

   CodeCopy

   let current = "";
   btn.addEventListener("click", () => {
     let next = randomQuote();
     while (next === current) {
       next = randomQuote();
     }
     current = next;
     quoteEl.textContent = next;
   });

   Expected result

   Clicking never shows the same quote twice in a row.

Related Resources