Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to build a random quote generator using HTML, CSS, and JavaScript?
In this tutorial, we'll build a random quote generator using HTML, CSS, and JavaScript. The application fetches quotes from an API and displays them in an elegant interface with a button to generate new quotes.
Project Overview
Our quote generator will include:
Clean HTML structure with quote display area
Responsive CSS styling with hover effects
JavaScript logic to fetch quotes from type.fit API
Random quote selection and display functionality
HTML Structure
First, let's create the HTML template with a container for the quote, author information, and a button to generate new quotes:
<!DOCTYPE html>
<html>
<head>
<title>Random Quote Generator</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>
<div class="boxSize">
<h1>
<i class="fas fa-quote-left"></i>
<span class="QuoteText" id="QuoteText"></span>
<i class="fas fa-quote-right"></i>
</h1>
<p class="author" id="author"></p>
<hr/>
<div class="QuoteBtn">
<button class="GenerateQuote_next" onclick="GenerateQuote()">Next Quote</button>
</div>
</div>
</body>
</html>
CSS Styling
Now we'll add attractive styling to make our quote generator visually appealing:
body {
min-height: 100vh;
transition: 0.5s;
display: flex;
background-color: #A4E5E0;
align-items: center;
justify-content: center;
font-family: Arial, sans-serif;
}
.boxSize {
margin: 10px;
border-radius: 15px;
width: 800px;
max-width: 90%;
display: flex;
flex-direction: column;
align-items: center;
padding: 40px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
background-color: rgba(255, 255, 255, 0.9);
}
.fa-quote-left, .fa-quote-right {
font-size: 35px;
color: #2C5E1A;
margin: 0 10px;
}
.QuoteText {
text-align: center;
font-size: 28px;
font-weight: bold;
color: #333;
line-height: 1.4;
margin: 0 15px;
}
.author {
margin: 20px 0 10px;
text-align: right;
font-size: 22px;
font-style: italic;
font-family: 'Georgia', serif;
color: #555;
}
.QuoteBtn {
width: 100%;
display: flex;
justify-content: center;
margin-top: 20px;
}
.GenerateQuote_next {
font-size: 18px;
border-radius: 25px;
cursor: pointer;
padding: 12px 30px;
font-weight: bold;
color: white;
background-color: #2C5E1A;
border: none;
transition: background-color 0.3s ease;
}
.GenerateQuote_next:hover {
background-color: #1a3610;
transform: translateY(-2px);
}
JavaScript Functionality
The JavaScript code handles fetching quotes from the API and displaying them randomly:
const GenerateQuote = async () => {
try {
const url = "https://type.fit/api/quotes";
const response = await fetch(url);
const quotes = await response.json();
const randomIndex = Math.floor(Math.random() * quotes.length);
const selectedQuote = quotes[randomIndex];
const quoteText = selectedQuote.text;
const author = selectedQuote.author || "Anonymous";
document.getElementById("QuoteText").innerHTML = quoteText;
document.getElementById("author").innerHTML = "~ " + author;
} catch (error) {
console.error("Error fetching quote:", error);
document.getElementById("QuoteText").innerHTML = "Unable to fetch quote";
document.getElementById("author").innerHTML = "";
}
};
// Load initial quote when page loads
GenerateQuote();
Complete Working Example
<!DOCTYPE html>
<html>
<head>
<title>Random Quote Generator</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<style>
body {
min-height: 100vh;
transition: 0.5s;
display: flex;
background-color: #A4E5E0;
align-items: center;
justify-content: center;
font-family: Arial, sans-serif;
}
.boxSize {
margin: 10px;
border-radius: 15px;
width: 800px;
max-width: 90%;
display: flex;
flex-direction: column;
align-items: center;
padding: 40px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
background-color: rgba(255, 255, 255, 0.9);
}
.fa-quote-left, .fa-quote-right {
font-size: 35px;
color: #2C5E1A;
margin: 0 10px;
}
.QuoteText {
text-align: center;
font-size: 28px;
font-weight: bold;
color: #333;
line-height: 1.4;
margin: 0 15px;
}
.author {
margin: 20px 0 10px;
text-align: right;
font-size: 22px;
font-style: italic;
font-family: 'Georgia', serif;
color: #555;
}
.QuoteBtn {
width: 100%;
display: flex;
justify-content: center;
margin-top: 20px;
}
.GenerateQuote_next {
font-size: 18px;
border-radius: 25px;
cursor: pointer;
padding: 12px 30px;
font-weight: bold;
color: white;
background-color: #2C5E1A;
border: none;
transition: background-color 0.3s ease;
}
.GenerateQuote_next:hover {
background-color: #1a3610;
transform: translateY(-2px);
}
</style>
</head>
<body>
<div class="boxSize">
<h1>
<i class="fas fa-quote-left"></i>
<span class="QuoteText" id="QuoteText">Loading quote...</span>
<i class="fas fa-quote-right"></i>
</h1>
<p class="author" id="author"></p>
<hr/>
<div class="QuoteBtn">
<button class="GenerateQuote_next" onclick="GenerateQuote()">Next Quote</button>
</div>
</div>
<script>
const GenerateQuote = async () => {
try {
const url = "https://type.fit/api/quotes";
const response = await fetch(url);
const quotes = await response.json();
const randomIndex = Math.floor(Math.random() * quotes.length);
const selectedQuote = quotes[randomIndex];
const quoteText = selectedQuote.text;
const author = selectedQuote.author || "Anonymous";
document.getElementById("QuoteText").innerHTML = quoteText;
document.getElementById("author").innerHTML = "~ " + author;
} catch (error) {
console.error("Error fetching quote:", error);
document.getElementById("QuoteText").innerHTML = "Unable to fetch quote";
document.getElementById("author").innerHTML = "";
}
};
// Load initial quote when page loads
GenerateQuote();
</script>
</body>
</html>
How It Works
The application follows these key steps:
API Request: Fetches quotes from the type.fit quotes API
Random Selection: Uses Math.random() to select a random quote from the array
DOM Updates: Updates the quote text and author elements with new content
Error Handling: Includes try-catch for handling API failures
Key Features
Responsive design that works on mobile and desktop
Smooth hover effects and transitions
Font Awesome icons for visual appeal
Error handling for network issues
Clean, modern styling with shadows and gradients
Conclusion
This random quote generator demonstrates how to combine HTML structure, CSS styling, and JavaScript API integration to create an interactive web application. The project showcases async/await for API calls and DOM manipulation for dynamic content updates.
2K+ Views
