<!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 href=
rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center
items-center h-screen">
<div class="quote-container p-8 rounded-lg
shadow-lg border-2 border-green-500
text-center">
<p class="quote-text text-lg text-gray-700 mb-4"
id="quoteText">
Click the button below to
generate a random quote!
</p>
<p class="author-text text-sm
text-gray-600" \
id="authorText">
</p>
<button
class="generate-button bg-green-500
text-white px-4 py-2 rounded-md
mt-4 hover:bg-green-600 focus:outline-none"
onclick="generateQuote()">
Generate Quote
</button>
</div>
<script>
const quotes = [
{
text: "The greatest glory in living lies not in never falling, but in rising every time we fall.",
author: "Nelson Mandela"
},
{
text: "The way to get started is to quit talking and begin doing.",
author: "Walt Disney"
},
{
text: "Your time is limited, don't waste it living someone else's life.",
author: "Steve Jobs"
},
{
text: "If life were predictable it would cease to be life, and be without flavor.",
author: "Eleanor Roosevelt"
},
{
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: "Spread love everywhere you go. Let no one ever come to you without leaving happier.",
author: "Mother Teresa"
},
{
text: "In the end, it's not the years in your life that count. It's the life in your years.",
author: "Abraham Lincoln"
},
{
text: "Life is either a daring adventure or nothing at all.",
author: "Helen Keller"
},
{
text: "Many of life's failures are people who did not realize how close they were to success when they gave up.",
author: "Thomas A. Edison"
}
];
function generateQuote() {
const randomIndex = Math.floor(Math.random() * quotes.length);
const quote = quotes[randomIndex];
document.getElementById("quoteText").textContent = `"${quote.text}"`;
document.getElementById("authorText").textContent = `- ${quote.author}`;
}
</script>
</body>
</html>