const quoteContainer = document.getElementById('quote-container')
const quoteText = document.getElementById('quote')
const authorText = document.getElementById('author')
const twitterBtn = document.getElementById('twitter')
const newQuoteBtn = document.getElementById('new-quote')
const loader = document.getElementById('loader')
let apiQuotes = [];
// Show Loading
function loading() {
loader.hidden = false;
quoteContainer.hidden = true;
}
function complete(){
quoteContainer.hidden = false;
loader.hidden = true;
}
// Show New Quote
function newQuote( ) {
loading();
// Pick a random quote from apiQuotes array
const quote = apiQuotes[Math.floor(Math.random() * apiQuotes.length)];
// Check if Author field is blank and replace it with Uknown
authorText.textContent = quote.author;
quoteText.textContent = quote.text;
if (!quote.author) {
authorText.textContent = 'Unknown Wisdom';
} else {
authorText.textContent = quote.author;
}
if (quote.text.length > 120) {
quoteText.classList.add('long-quote');
} else {
quoteText.classList.remove('long-quote');
}
quoteText.textContent = quote.text;
complete();
}
// Get Quotes From API
async function getQuotes() {
loading();
const apiUrl = 'https://type.fit/api/quotes';
try {
const response = await fetch(apiUrl);
apiQuotes = await response.json();
newQuote();
} catch (error) {
// Catch Error Here
}
}
newQuoteBtn.addEventListener('click', newQuote);
// On Load
getQuotes();
// loading()
// Screenshot Download
@import url('https://fonts.googleapis.com/css2?family=Fraunces&display=swap');
html {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
background-color: #dae7ff;
background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23ffffff' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
color: rgb(46, 46, 46);
font-family: Fraunces, sans-serif;
font-weight: 550;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.quote-container {
width: auto;
max-width: 900px;
padding: 10px 40px;
border-radius: 10px;
background-color: #00ffb33b;
box-shadow: 0 10px 10px 0px #2c244e6e;
}
.quote-text {
font-size: 2.2rem;
}
.long-quote {
font-size: 2rem;
}
.fa-brain {
color: #4b4b4b60;
font-size: 2rem;
}
.quote-author {
margin-top: 15px;
font-size: 1.75rem;
font-weight: 200;
font-style: italic;
}
.button-container {
margin-top: 15px;
display: flex;
justify-content: space-between;
}
button {
cursor: pointer;
font-size: 1rem;
height: 2rem;
border: none;
border-radius: 10px;
color: rgba(0, 0, 0, 0.582);
background: #e6efff;
outline: none;
padding: 0.5rem 2rem;
box-shadow: 0 0.2rem rgba(7, 73, 57, 0.651);
font-style: oblique;
}
button:hover {
filter: brightness(98%)
}
button:active {
transform: translate(0, 0.5rem);
box-shadow: 0 0.1rem rgba(7, 73, 57, 0.651);
}
.instagram-button {
background: rgb(131,58,180);
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}
.fa-instagram {
color: rgb(255, 255, 255);
font-size: 2rem;
line-height: 17px;
}
.loader {
border: 16px solid #dae7ff; /* Light grey */
border-top: 16px solid #00ffb33b; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Media Query */
@media screen and (max-width: 1000px) {
.quote-container {
margin: auto 10px;
}
.quote-text {
font-size: 2rem;
}
button {
font-size: 1rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Awesome Quotes</title>
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
<link rel="manifest" href="favicon/site.webmanifest">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
</head>
<body>
<div class="quote-container" id="quote-container">
<!-- Quote -->
<div class="quote-text">
<i class="fas fa-brain"></i>
<span id="quote"></span>
</div>
<!-- Autor -->
<div class="quote-author">
<span id="author"></span>
</div>
<!-- Buttons -->
<div class="button-container">
<button class="instagram-button" id="Instagram" title="Share to your story!">
<i class="fab fa-instagram"></i>
</button>
<button id="new-quote">New Quote</button>
</div>
</div>
<!-- Loader -->
<div class="loader" id="loader"></div>
</body>
</html>
question from:
https://stackoverflow.com/questions/65869787/how-to-turn-div-into-image-and-download-it-with-button