"Quote goes here"
- Author
#quote-container {
max-width: 600px;
margin: 0 auto;
text-align: center;
padding: 50px;
border-radius: 10px;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
#quote {
font-size: 2.5rem;
font-weight: 600;
margin-bottom: 20px;
}
#author {
font-size: 1.5rem;
font-weight: 400;
margin-bottom: 30px;
}
#buttons {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
button {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #555;
}
var quotes = [
{
quote: "Quote 1",
author: "Author 1"
},
{
quote: "Quote 2",
author: "Author 2"
},
{
quote: "Quote 3",
author: "Author 3"
},
// Add more quotes as needed
];
function getRandomQuote() {
var randomIndex = Math.floor(Math.random() * quotes.length);
var randomQuote = quotes[randomIndex];
var quoteText = document.querySelector("#quote");
var authorText = document.querySelector("#author");
quoteText.textContent = randomQuote.quote;
authorText.textContent = "- " + randomQuote.author;
}
function tweetQuote() {
var currentQuote = document.querySelector("#quote").textContent;
var currentAuthor = document.querySelector("#author").textContent;
var tweetUrl = "https://twitter.com/intent/tweet?text=" + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor);
window.open(tweetUrl);
}
var newQuoteButton = document.querySelector("#new-quote");
var tweetButton = document.querySelector("#tweet-quote");
newQuoteButton.addEventListener("click", getRandomQuote);
tweetButton.addEventListener("click", tweetQuote);
getRandomQuote(); // Show a random quote on page load
No comments:
Post a Comment