Random Quote Generator | HTML, CSS & JavaScript

Random Quote Generator with HTML, CSS & JavaScript

10 DAYS 10 PROJECT CHALLENGE

Day #06

Project Overview

This project is a Random Quote Generator built using HTML, CSS, and JavaScript. It allows users to generate inspirational or fun quotes either at the click of a button or by fetching them from an API. The app is designed to be clean, simple, and engaging, making it a great beginner-friendly JavaScript project to learn DOM manipulation, randomization, and API handling.

Key Features

Random Quote Display – Shows a random quote on button click.
API Integration (Optional) – Fetches quotes dynamically from a public API.
Responsive Design – Works smoothly on desktop, tablet, and mobile.
User-Friendly UI – Minimal and modern styling for a clean look.
Replay Anytime – Click the button anytime to generate a new quote instantly.

HTML Code

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

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

// --- 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.";
  }
}