Skip to content

Instantly share code, notes, and snippets.

@enlineaweb
Created February 10, 2023 21:33
Show Gist options
  • Save enlineaweb/a5dd2614b3b9bcdfcd3b6ee22d3ad666 to your computer and use it in GitHub Desktop.
Save enlineaweb/a5dd2614b3b9bcdfcd3b6ee22d3ad666 to your computer and use it in GitHub Desktop.
copy text JS
<div class="container">
<div class="quote-container">
<div class="quote-img">
<img src="https://i.imgur.com/enMweuQ.jpeg" alt="" />
</div>
<div class="quote-text">
<div class="copy-icon">
<span id="copy-quote">
<img src="https://i.imgur.com/zHgKDpN.png" alt="" />
</span>
</div>
<div class="quote">
<p id="quote-text">
The mind is everything. What you think you become.
</p>
<h3 id="quote-author">- Buddha</h3>
</div>
<p>Click to Generate new random quotes🚀</p>
<button class="btn" id="generate-quote">Generate Quote</button>
</div>
</div>
</div>
let generateQuoteBtn = document.querySelector('#generate-quote');
let quoteText = document.querySelector('#quote-text');
let quoteAuthor = document.querySelector('#quote-author');
let handleCopyClick = document.querySelector('#copy-quote');
generateQuoteBtn.addEventListener('click', () => {
fetch('https://api.quotable.io/random')
.then((response) => response.json())
.then((data) => {
quoteText.textContent = data.content;
quoteAuthor.textContent = `- ${data.author}`;
});
});
handleCopyClick.addEventListener('click', () => {
let text = quoteText.textContent;
let author = quoteAuthor.textContent;
navigator.clipboard.writeText(`${text} ${author}`);
alert(`Quote by ${author} copied to clipboard!`);
});
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #f5f5f5;
}
.container {
max-width: 1200px;
padding: 0;
margin: 0 auto;
}
@media (max-width: 768px) {
.container {
padding: 0 20px;
}
}
.btn {
margin: 0.7rem 0;
padding: 1rem 2rem;
border: none;
border-radius: 10px;
background-color: #2bb673;
color: #fff;
font-size: 1.3rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid #2bb673;
}
.btn:hover {
color: #2bb673;
background-color: #f5f5f5;
}
.quote-container {
display: flex;
justify-content: center;
align-items: center;
padding: 3rem 0;
gap: 40px;
}
@media (max-width: 768px) {
.quote-container {
flex-direction: column-reverse;
}
}
.quote-img,
.quote-text {
flex: 1;
}
.quote-img img {
width: 100%;
height: 450px;
object-fit: cover;
object-position: center;
border-radius: 10px;
}
.copy-icon img {
width: 30px;
cursor: pointer;
}
.quote p {
font-size: 1.4rem;
font-weight: 300;
color: #333;
margin: 1rem 0;
}
.quote h3 {
font-size: 1.4rem;
font-weight: 500;
color: #333;
margin: 1rem 0;
}
.my-svg {
width: 300px;
height: 300px;
}
@enlineaweb
Copy link
Author

Recommended this code to paste text to clipboard.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment