Random Quote Generator Using HTML, CSS and JavaScript

random-quote-generator/
├── index.html   → the page structure
├── style.css    → the look and layout
└── script.js    → the behaviour

<!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>
  <main class="card">
    <p class="mark">“</p>
    <blockquote id="quote" class="quote" aria-live="polite">Click the button to get a quote.</blockquote>
    <p id="author" class="author"></p>

    <div class="btns">
      <button id="new">New quote</button>
      <button id="copy" class="ghost">Copy</button>
      <a id="share" class="ghost" target="_blank" rel="noopener">Share</a>
    </div>
    <p class="count">Quotes seen: <span id="seen">0</span></p>
    <p id="msg" class="msg" aria-live="polite"></p>
  </main>

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Arial, sans-serif;
  background: #eef1f8;
  color: #1f2937;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.card {
  width: 100%;
  max-width: 520px;
  background: #fff;
  padding: 34px 30px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(31, 41, 55, 0.12);
  text-align: center;
}

.mark {
  font-size: 5rem;
  line-height: 0.6;
  color: #c7d2fe;
  font-family: Georgia, serif;
}

.quote {
  font-size: 1.4rem;
  line-height: 1.6;
  font-family: Georgia, "Times New Roman", serif;
  min-height: 7.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s;
}

.quote.fade, .author.fade { opacity: 0; }

.author {
  margin-top: 10px;
  font-weight: 700;
  color: #4f46e5;
  min-height: 1.4em;
  transition: opacity 0.25s;
}

.btns {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 22px 0 12px;
  flex-wrap: wrap;
}

.btns button, .btns a {
  padding: 11px 20px;
  border: none;
  border-radius: 10px;
  background: #4f46e5;
  color: #fff;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
}

.btns .ghost { background: #eef2ff; color: #4338ca; }

.count { font-size: 0.85rem; color: #6b7280; }
.msg { min-height: 1.3em; color: #16a34a; font-weight: 600; font-size: 0.9rem; }

const QUOTES = [
  { text: 'The only way to do great work is to love what you do.', author: 'Steve Jobs' },
  { text: 'It always seems impossible until it is done.', author: 'Nelson Mandela' },
  { text: 'First, solve the problem. Then, write the code.', author: 'John Johnson' },
  { text: 'Simplicity is the soul of efficiency.', author: 'Austin Freeman' },
  { text: 'Whether you think you can or you think you cannot, you are right.', author: 'Henry Ford' },
  { text: 'The best way to predict the future is to invent it.', author: 'Alan Kay' },
  { text: 'Programs must be written for people to read, and only incidentally for machines to execute.', author: 'Harold Abelson' },
  { text: 'Do not watch the clock; do what it does. Keep going.', author: 'Sam Levenson' },
  { text: 'Well done is better than well said.', author: 'Benjamin Franklin' },
  { text: 'A journey of a thousand miles begins with a single step.', author: 'Lao Tzu' }
];

const quoteEl = document.getElementById('quote');
const authorEl = document.getElementById('author');
const seenEl = document.getElementById('seen');
const msg = document.getElementById('msg');
const shareEl = document.getElementById('share');

let last = -1;
let seen = 0;
let current = null;
let busy = false;     // true while a fade is running

function randomIndex() {
  let i;
  do {
    i = Math.floor(Math.random() * QUOTES.length);
  } while (i === last && QUOTES.length > 1);     // never the same one twice
  return i;
}

function newQuote() {
  if (busy) return;                              // ignore clicks during the fade
  busy = true;
  quoteEl.classList.add('fade');
  authorEl.classList.add('fade');

  setTimeout(() => {
    last = randomIndex();
    current = QUOTES[last];
    quoteEl.textContent = current.text;
    authorEl.textContent = '— ' + current.author;
    seenEl.textContent = ++seen;
    msg.textContent = '';

    const tweet = '“' + current.text + '” — ' + current.author;
    shareEl.href = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(tweet);

    quoteEl.classList.remove('fade');
    authorEl.classList.remove('fade');
    busy = false;
  }, 250);
}

document.getElementById('new').addEventListener('click', newQuote);

document.getElementById('copy').addEventListener('click', async () => {
  if (!current) return;
  const text = '“' + current.text + '” — ' + current.author;
  try {
    await navigator.clipboard.writeText(text);
    msg.textContent = 'Copied!';
  } catch (e) {
    // Clipboard blocked (for example inside an iframe): select the quote so Ctrl+C works
    const range = document.createRange();
    range.selectNodeContents(quoteEl);
    const sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
    msg.textContent = 'Quote selected - press Ctrl+C to copy';
  }
});

// Space bar = new quote, but not while a button or link has focus (it would click that one)
document.addEventListener('keydown', e => {
  const tag = e.target.tagName;
  if (e.code === 'Space' && tag !== 'BUTTON' && tag !== 'A' && tag !== 'INPUT' && tag !== 'TEXTAREA') {
    e.preventDefault();
    newQuote();
  }
});

newQuote();