Today, I want to share a fun little project I created a Random Quote Generator using HTML, CSS and JavaScript. It’s a straightforward yet powerful tool that displays random quotes with the click of a button. Whether you’re looking for inspiration, motivation, or just a little fun, this project is the perfect way to dive into HTML, CSS and JavaScript.
Random Quote Generator
A Random Quote Generator does exactly what its name suggests it generates random quotes each time you press a button. It’s a great way to explore the basics of programming while making something you can share with friends or embed in your personal website.
As someone who loves tinkering with code, I decided to build this project to improve my JavaScript skills and create something fun and interactive. Plus, who doesn’t love a good quote to brighten their day?
Features:
Here are some features that make this Random Quote Generator functional and fun:
- Random Quotes from an Array – Pulls quotes from a predefined array.
- Dynamic Quote Display – Updates the quote and author in real-time.
- Copy to Clipboard – Quickly copy your favorite quotes with a button.
- Styling with CSS – Added a visually pleasing design.
- Responsive Design – Works seamlessly on both desktop and mobile.
Here’s how I built this project:
HTML Structure
The HTML provides the structure a container for the quote, author, and buttons.
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="styles.css">
</head>
<body>
<div class="container">
<h1>Random Quote Generator</h1>
<div id="quote-box">
<p id="quote">"Click the button to generate a quote!"</p>
<p id="author">- Author</p>
</div>
<div class="buttons">
<button id="new-quote">New Quote</button>
<button id="copy-quote">Copy to Clipboard</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS for Styling
I kept the design simple yet elegant with CSS.
code/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
text-align: center;
max-width: 600px;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
margin-bottom: 20px;
}
#quote-box {
margin-bottom: 20px;
}
#quote {
font-size: 1.5rem;
margin-bottom: 10px;
}
#author {
font-size: 1.2rem;
color: #666;
}
.buttons button {
margin: 5px;
padding: 10px 20px;
font-size: 1rem;
border: none;
border-radius: 5px;
cursor: pointer;
}
#new-quote {
background-color: #007bff;
color: white;
}
#copy-quote {
background-color: #28a745;
color: white;
}
JavaScript for Functionality
The JavaScript brings everything to life by generating and displaying quotes dynamically.
code// script.js
// Array of quotes
const quotes = [
{ text: "The best way to predict the future is to invent it.", author: "Alan Kay" },
{ text: "Life is 10% what happens to us and 90% how we react to it.", author: "Charles R. Swindoll" },
{ text: "Your time is limited, don't waste it living someone else's life.", author: "Steve Jobs" },
{ text: "The only way to do great work is to love what you do.", author: "Steve Jobs" },
{ text: "Success is not the key to happiness. Happiness is the key to success.", author: "Albert Schweitzer" }
];
// Select elements
const quoteText = document.getElementById('quote');
const quoteAuthor = document.getElementById('author');
const newQuoteBtn = document.getElementById('new-quote');
const copyQuoteBtn = document.getElementById('copy-quote');
// Function to generate a new quote
function generateQuote() {
const randomIndex = Math.floor(Math.random() * quotes.length);
const selectedQuote = quotes[randomIndex];
quoteText.textContent = `"${selectedQuote.text}"`;
quoteAuthor.textContent = `- ${selectedQuote.author}`;
}
// Function to copy the quote to clipboard
function copyQuote() {
const textToCopy = `${quoteText.textContent} ${quoteAuthor.textContent}`;
navigator.clipboard.writeText(textToCopy).then(() => {
alert("Quote copied to clipboard!");
});
}
// Event listeners
newQuoteBtn.addEventListener('click', generateQuote);
copyQuoteBtn.addEventListener('click', copyQuote);
// Generate an initial quote
generateQuote();
How It Works
- HTML defines the structure of the quote and buttons.
- CSS styles the page, making it look polished and responsive.
- JavaScript:
- Pulls a random quote from the
quotesarray. - Updates the quote and author dynamically.
- Copies the quote to the clipboard with the click of a button.
- Pulls a random quote from the
Conclusion
This Random Quote Generator was a fun and fulfilling project to work on. It’s a simple way to practice JavaScript fundamentals like arrays, DOM manipulation, and event handling. Plus, it’s a tool you can use or share with others!
Feel free to expand on this project by:
- Fetching quotes from an API for a larger database.
- Adding categories or tags for quotes.
- Enabling users to save their favorite quotes.