<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #FEDA77;
font-family: sans-serif;
font-size: 1.5em;
}
#quote-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 10px;
margin: 0 auto;
width: 500px;
padding: 20px;
background-color: #FEDA77;
}
#quote-box {
width: 100%;
height: 100%;
background-color: #E6E6E6;
border-radius: 10px;
padding: 15px;
}
#quote {
font-style: italic;
font-weight: bold;
text-align: center;
}
#author {
font-style: italic;
font-size: 0.8em;
text-align: right;
}
</style>
</head>
<body>
<div id="quote-container">
<div id="quote-box">
<p id="quote">Every day may not be good, but there is something good in every day.</p>
<p id="author">- Unknown</p>
</div>
</div>
<script>
// Make array of quotes
const quotes = [
{
quote: "Life is 10% what happens to you and 90% how you react to it.",
author: "Charles R. Swindoll"
},
{
quote: "It does not matter how slowly you go as long as you do not stop.",
author: "Confucius"
},
{
quote: "Every day may not be good, but there is something good in every day.",
author: "Unknown"
},
{
quote: "Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time.",
author: "Thomas A. Edison"
},
{
quote: "Life is like riding a bicycle. To keep your balance, you must keep moving.",
author: "Albert Einstein"
}
]
// Get a random quote
const getRandomQuote = () => {
const quoteIndex = Math.floor(Math.random() * quotes.length);
const { quote, author } = quotes[quoteIndex];
return { quote, author };
};
// Get a random quote and update the page
const updateQuote = () => {
const { quote, author } = getRandomQuote();
document.getElementById("quote").innerText = quote;
document.getElementById("author").innerText = author;
};
// Initial page load
updateQuote();
</script>
</body>
</html>
