Quote Generator Source 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>
</head>

<body>
    <div class="container">
        <h1>✨ Random Quote Generator</h1>
        
        <div class="quote-box">
            <div class="quote-text" id="quoteText">Click "New Quote" to get started!</div>
            <div class="quote-author" id="quoteAuthor">- Anonymous</div>
        </div>
        
        <div class="button-group">
            <button onclick="getNewQuote()">New Quote</button>
            <button onclick="copyQuote()">Copy</button>
        </div>
        
        <div class="copy-feedback" id="feedback"></div>
    </div>
</body>

</html>

JavaScript - Quotes Database

const quotes = [
    { text: "The only way to do great work is to love what you do.", author: "Steve Jobs" },
    { text: "Innovation distinguishes between a leader and a follower.", author: "Steve Jobs" },
    { text: "Life is what happens when you're busy making other plans.", author: "John Lennon" },
    { text: "The future belongs to those who believe in the beauty of their dreams.", author: "Eleanor Roosevelt" },
    { text: "It is during our darkest moments that we must focus to see the light.", author: "Aristotle" },
    { text: "The only impossible journey is the one you never begin.", author: "Tony Robbins" },
    { text: "Success is not about being the best. It's about being better than you were yesterday.", author: "Unknown" },
    { text: "Don't watch the clock; do what it does. Keep going.", author: "Sam Levenson" },
    { text: "Believe you can and you're halfway there.", author: "Theodore Roosevelt" },
    { text: "The best time to plant a tree was 20 years ago. The second best time is now.", author: "Chinese Proverb" }
];

JavaScript - Get Random Quote

let currentQuote = {};

function getNewQuote() {
    const randomIndex = Math.floor(Math.random() * quotes.length);
    currentQuote = quotes[randomIndex];
    
    document.getElementById('quoteText').textContent = `"${currentQuote.text}"`;
    document.getElementById('quoteAuthor').textContent = `- ${currentQuote.author}`;
}

JavaScript - Copy Quote to Clipboard

function copyQuote() {
    const text = `"${currentQuote.text}" - ${currentQuote.author}`;
    
    navigator.clipboard.writeText(text).then(() => {
        const feedback = document.getElementById('feedback');
        feedback.textContent = '✅ Quote copied to clipboard!';
        
        setTimeout(() => {
            feedback.textContent = '';
        }, 2000);
    }).catch((error) => {
        console.log('Copy failed:', error);
    });
}

Key Learning Points

• Arrays of Objects: Store multiple quotes with text and author
• Math.random(): Generate random number to select quotes
• Template Literals: Use backticks and ${} for dynamic content
• Clipboard API: navigator.clipboard.writeText() to copy text
• Promises: Handle async operations with .then() and .catch()
• setTimeout: Automatically clear feedback messages
• getElementById: Access and modify DOM elements
• textContent: Set text content of HTML elements

Features

✅ Display random inspirational quotes
✅ Show author attribution  
✅ Copy quotes to clipboard with formatted text
✅ Feedback message on successful copy
✅ Auto-clear feedback after 2 seconds
✅ 10+ motivational quotes database
✅ Responsive design for all devices

← Back to Project