Random Quote Generator | HTML, CSS & JavaScript

Random Quote Generator with HTML, CSS & JavaScript

10 DAYS 10 PROJECT CHALLENGE

Day #06

Project Overview

The Random Quote Generator is a beginner-friendly project created with HTML, CSS, and JavaScript. The application displays inspirational and fun quotes every time the user clicks the New Quote button. The project includes two versions of the code. One option allows the user to view quotes from the array in the JavaScript file, and the other option is using an API to fetch random quotes.

This project is designed to help beginners practice important JavaScript concepts by creating an interactive application. You can learn how to store data in arrays, using random number functions, applying events to buttons, updating HTML content with JavaScript, and using asynchronous JavaScript to request data from the server.

Key Features

Random Quote Display: Users can click the New Quote button to display a different quote. The application selects a quote randomly from the available collection and updates the text on the page.
Local Quote Generation: The first version of this application stores multiple quotes in a JavaScript array. Clicking the button produces a random number and displays the relevant quote.
API Integration: The second version of the application uses an API to fetch a random quote. This allows the application to display a wider ranger of quotes without being limited to a few stored quotes.
Dynamic Text Update: JavaScript updates the quote displayed on the webpage whenever a new quote is generated or fetched. Users can therefore change the displayed content without refreshing the page.
New Quote Button: Each version contains a New Quote button which allows users to view a new quote every time. The new quote is either picked from a collection of quotes or fetched from a quote API.
Error Handling: The API version includes error handling to manage situations where the quote cannot be fetched successfully. In such cases, the application displays a message instead of leaving the quote area empty.
Clean and Simple UI: The project uses a minimal interface with a quote box, heading, quote text, and button. This keeps the design focused on displaying and generating quotes.
Responsive Design: The application has a responsive design which allows it to display properly and respond to user requests on different screen sizes.
Beginner-Friendly JavaScript: The project demonstrates useful JavaScript concepts such as arrays, random numbers, event listeners, DOM manipulation, Fetch, and asynchronous functions in a simple application.

What You’ll Learn

Understand how to store multiple quotes inside a JavaScript array.
Learn how Math.random() can be used to select a random item.
Practice generating random indexes from an array.
Learn how to add click events to buttons.
Understand how to update HTML content dynamically using JavaScript.
Learn how to use the Fetch API to retrieve data from an external API.
Understand the basics of asynchronous JavaScript using async and await.
Practice using try...catch for basic error handling.

HTML Code

The HTML code below establishes the basic structure for both versions of the Random Quote Generator. First, the style.css file is linked inside the <head> section so CSS can control the appearance of the page. The <body> contains separate sections for the local Math.random() version and the API Fetch version.

Each section has a heading and a quote-box container. The <p> elements with the quote-local and quote-api IDs provide spaces where JavaScript displays the generated quotes. The New Quote buttons use separate IDs so JavaScript can add click events to them. Finally, the script.js file is linked at the bottom of the <body> so that JavaScript can control the functionality of the quote generator.

<!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>

  <!-- Math.random version -->
  <div>
    <h2>Random Quote Generator (Math.random)</h2>
    <div class="quote-box">
      <p id="quote-local">Click the button to get a quote!</p>
      <button id="new-quote-local">New Quote</button>
    </div>
  </div>

  <!-- API Fetch version -->
  <div>
    <h2>Random Quote Generator (API Fetch)</h2>
    <div class="quote-box">
      <p id="quote-api">Click the button to get a quote!</p>
      <button id="new-quote-api">New Quote</button>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS Code

The CSS code controls the appearance and layout of the Random Quote Generator. The content body utilizes Flex to space the content both vertically and at the center of the page. It also adds spacing between the two quote generator versions and sets the page background, font, and padding.

The .quote-box class creates the main quote containers with a white background, padding, rounded corners, and a shadow. The p selector is accountable for the style of the quote text, while the button selector styles the New Quote buttons. A hover effect changes the button background when the user moves the cursor over it, making the interface more interactive.

body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  min-height: 100vh;
  background: #f4f4f9;
  margin: 0;
  padding: 20px;
}

h2 {
  color: #002252;
  margin-bottom: 10px;
  text-align: center;
}

.quote-box {
  text-align: center;
  max-width: 500px;
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

p {
  font-size: 18px;
  margin-bottom: 20px;
  color: #333;
}

button {
  background: #eea731;
  color: #fff;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s ease;
}

button:hover {
  background: #002252;
}

Javascript Code

The JavaScript code provides the main functionality for both the versions of the quote generator. First, the quotes array stores a collection of quotes for the local version. When the New Quote button is clicked, Math.random() generates a random number that is used to select a quote from the array. JavaScript then updates the quote-local element with the selected text.

The API version differs from the local one as it uses an event listener to call the getQuote() function when the user clicks its New Quote button. The function uses fetch() to request a quote from the external API and waits for the response using async and await. After receiving the data, JavaScript displays the quote inside the quote-api element. The try…catch block handles errors and displays a message if the API request fails.

// --- Math.random version ---
const quotes = [
  "The best way to predict the future is to create it.",
  "Dream big and dare to fail.",
  "Don’t count the days, make the days count.",
  "Success is not final, failure is not fatal: it is the courage to continue that counts.",
  "Happiness depends upon ourselves."
];

document.getElementById("new-quote-local").addEventListener("click", () => {
  const randomIndex = Math.floor(Math.random() * quotes.length);
  document.getElementById("quote-local").innerText = quotes[randomIndex];
});

// --- API Fetch version ---
document.getElementById("new-quote-api").addEventListener("click", getQuote);

async function getQuote() {
  try {
    const response = await fetch("https://api.api-ninjas.com/v1/quotes", {
      headers: {
        'X-Api-Key': 'WCLPRfFD20HDzwD8XL5qgA==NGxwo9MpkWnAADpS'
      }
    });
    const data = await response.json();
    document.getElementById("quote-api").innerText = data[0].quote;
  } catch (error) {
    document.getElementById("quote-api").innerText = "Oops! Could not fetch a quote.";
  }
}