Merge pull request #21 from NeilAn99/issue-18

Add copy to clipboard button - Issue 18
seths10 · Oct 7, 2022 · 9080db6 · 9080db6
2 parents 19b9cf3 + 6d26f77
commit 9080db6
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="UTF-8" />
 		<title>Quotes Generator</title>
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"/>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"/>
         <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
 		<link rel="stylesheet" href="styles/style.css" />
 	</head>
@@ -28,6 +28,10 @@ <h2>Quote Generator</h2>
 						<button id="Tbtn" title="Tweet This!">
                             <i class="fab fa-twitter"></i>
                             Tweet This
+                        </button>
+						<button id="Cbtn" title="Copy This!">
+                            <i class="fa-solid fa-clipboard"></i>
+                            Copy to Clipboard
                         </button>
 					</div>
 				</div>

diff --git a/js/script.js b/js/script.js
@@ -2,17 +2,29 @@ let btn = document.querySelector('#Qbtn');
 let quote = document.querySelector('.quote');
 let writer = document.querySelector('.writer');
 let twitterBtn = document.querySelector('#Tbtn');
+let copyBtn = document.querySelector('#Cbtn');
 
 btn.addEventListener('click', function () {
 	let random = Math.floor(Math.random() * quotes.length);
 	quote.innerHTML = quotes[random].text;
 	writer.innerHTML = '-' + quotes[random].author;
 });
 
-twitterBtn.addEventListener('click', tweetQuote());
+twitterBtn.addEventListener('click', tweetQuote);
+
+copyBtn.addEventListener('click', copyQuote);
 
 // Tweet Quote
 function tweetQuote() {
 	const twitterUrl = `https://twitter.com/intent/tweet?text=${quote.innerText} ${writer.innerText}`;
 	window.open(twitterUrl, '_blank');
 }
+
+// Copy to Clipboard button
+function copyQuote() {
+	// Get the quote
+	var copiedQuote = quote.innerHTML;
+
+	// Copy quote to clipboard
+	navigator.clipboard.writeText(copiedQuote);
+}