Add a copy button

src/deformat.js

@@ -6,3 +6,18 @@ document.getElementById("deformat").addEventListener("click", function() {
 document.getElementById("clear").addEventListener("click", function() {
 	document.getElementById("text").value = "";
 });
+
+document.getElementById("copy").addEventListener("click", function () {
+	const text = document.querySelector("#text");
+	text.select();
+	document.execCommand("copy");
+	showToast();
+});
+
+function showToast() {
+	const toast = document.getElementById("toast");
+	toast.style.display = "block";
+	setTimeout(() => {
+		toast.style.display = "none";
+	}, 3000);
+}

src/index.html

@@ -15,7 +15,8 @@ <h1>Deformat</h1>
 	<form>
 		<textarea id="text" rows="25" placeholder="Paste text here" autofocus></textarea>
 		<button id="deformat" type="button" class="primary">Deformat</button>
-		<button id="clear" type="button" class="btn btn-secondary">Clear</button>
+		<button id="copy" type="button">Copy</button>
+		<button id="clear" type="button">Clear</button>
 	</form>
 	<p>
 		No more manually removing each line break when pasting large chunks of text
@@ -25,11 +26,16 @@ <h1>Deformat</h1>
 	<h2>Tips</h2>
 	<ul>
 		<li>The following characters are removed: carriage return and line feed together (<code>\r\n</code>), carriage return (<code>\r</code>), line feed (<code>\n</code>), and extra single space characters.</li>
-		<li>Click the <strong>Deformat</strong> button to remove whitespace.</li>
-		<li>Use <strong>Ctrl+A</strong> to select all text.</li>
-		<li>Use the <strong>Clear</strong> button to remove all text.</li>
+		<li>Click <strong>Deformat</strong> to remove whitespace.</li>
+		<li>Use <strong>Copy</strong> to copy all text to the clipboard.</li>
+		<li>Use <strong>Clear</strong> to remove all text.</li>
 	</ul>
 	<small>made by <a href="https://johnjago.com">JC</a> • <a href="https://forms.gle/ghcJtmPQNSrdRKfZ8">send feedback</a></small>
+	<div id="toast-container">
+		<div class="toast" id="toast" style="display: none;">
+			Text copied successfully!
+		</div>
+	</div>
 	<script src="deformat.js"></script>
 </body>
 </html>

src/style.css

@@ -57,3 +57,39 @@ textarea {
 	padding: 5px;
 	width: 100%;
 }
+
+#toast-container {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 9999;
+}
+
+.toast {
+    display: none;
+    background-color: #4CAF50;
+    color: #fff;
+    padding: 15px;
+    border-radius: 5px;
+    margin-bottom: 15px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    animation: slideInRight 0.5s, fadeOut 0.5s 2.5s forwards;
+}
+
+@keyframes slideInRight {
+    from {
+        transform: translateX(100%);
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}