In the world of web development, a Random Quote Generator is not just a fun project—it’s a source of inspiration and wisdom. Whether you’re building it for personal motivation or as a delightful feature for your website, this beginner-friendly guide will walk you through the process of creating a visually appealing Random Quote Generator using HTML, CSS, and JavaScript.
Setting Up the HTML Structure
Let’s begin by creating the basic HTML structure for our Random Quote Generator. We’ll have a container for the generator, a display area for quotes, and a button to trigger the randomness.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Random Quote Generator</title>
</head>
<body>
<div class="generator">
<div class="quote" id="quote">
"Your random quote will appear here."
</div>
<button id="generate">Generate Quote</button>
</div>
<script src="script.js"></script>
</body>
</html>
This HTML structure lays the foundation for our Random Quote Generator, including a quote display area and a button to generate quotes.
Styling with CSS
To make our Random Quote Generator visually appealing, we’ll add some CSS styles. Create a style.css file and apply the following styles:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.generator {
background-color: #fff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 5px;
width: 300px;
text-align: center;
padding: 20px;
}
.quote {
font-size: 18px;
margin-bottom: 20px;
}
button {
border: none;
background-color: #007BFF;
color: #fff;
font-size: 16px;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #0056b3;
}
These CSS styles give our Random Quote Generator a modern and clean appearance, ensuring it’s visually appealing.
Adding JavaScript Functionality
Now, let’s infuse our Random Quote Generator with JavaScript functionality. Create a script.js file and include the following code:
// Select elements from the DOM
const quoteDisplay = document.getElementById("quote");
const generateButton = document.getElementById("generate");
// Array of random quotes
const quotes = [
"The only limit to our realization of tomorrow will be our doubts of today. – Franklin D. Roosevelt",
"The best way to predict the future is to create it. – Peter Drucker",
"In the middle of every difficulty lies opportunity. – Albert Einstein",
"Don’t watch the clock; do what it does. Keep going. – Sam Levenson",
"You are never too old to set another goal or to dream a new dream. – C.S. Lewis",
"The secret of getting ahead is getting started. – Mark Twain",
// Add more quotes here
];
// Function to generate a random quote
function generateRandomQuote() {
const randomIndex = Math.floor(Math.random() * quotes.length);
quoteDisplay.textContent = quotes[randomIndex];
}
// Add event listener to the generate button
generateButton.addEventListener("click", generateRandomQuote);
// Generate an initial quote
generateRandomQuote();
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Making it Responsive
To ensure our Random Quote Generator is responsive, we can use media queries in our style.css file to adjust the layout for different screen sizes. Here’s an example of how you can do this:
/* Small screens (mobile) */
@media (max-width: 600px) {
.generator {
width: 80%;
}
}
/* Medium screens (tablets) */
@media (min-width: 601px) and (max-width: 1024px) {
.generator {
width: 60%;
}
}
/* Large screens (desktop) */
@media (min-width: 1025px) {
.generator {
width: 400px;
}
}These media queries adapt the layout of the generator for small screens (mobile), medium screens (tablets), and large screens (desktop).
Click here to get the complete source code.
Here is an article on how to host this app online using GitHub.
