copy text JS

copy-text-js.markdown

copy text JS

A Pen by Olawanle Joel on CodePen.

License.

index.html

<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>

script.js

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!`);
});

style.css

@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;
}

Recommended this code to paste text to clipboard.