Copy & Move Project

HuXn-WebDev · HuXn-WebDev · commit eafedf8aa35c · 2022-06-30T12:07:04.000-07:00
diff --git a/24. Copy and Move/app.js b/24. Copy and Move/app.js
@@ -0,0 +1,34 @@
+const copyText = document.querySelector("textarea[name=copyTxt");
+const finalText = document.querySelector("textarea[name=finalTxt");
+const moveBtn = document.querySelector(".moverBtn");
+const copyBtn = document.querySelector(".copyBtn");
+const output = document.querySelector(".output");
+
+copyBtn.addEventListener("click", () => {
+  let temp = copyText.value;
+  copyToClipBoard(temp);
+});
+
+moveBtn.addEventListener("click", () => {
+  let temp = copyText.value;
+  finalText.value = temp;
+});
+
+copyText.addEventListener("click", () => this.select());
+finalText.addEventListener("click", () => this.select());
+
+function copyToClipBoard(str) {
+  const outputContainer = document.querySelector(".output-container");
+  const textarea = document.createElement("textarea");
+  textarea.value = str;
+  outputContainer.appendChild(textarea);
+  textarea.select();
+  document.execCommand("copy");
+  outputContainer.removeChild(textarea);
+  output.innerHTML = `<h3>Content Copied </h3>`;
+  output.classList.add("added");
+  setTimeout(() => {
+    output.classList.toggle("added");
+    output.textContent = "";
+  }, 2000);
+}
diff --git a/24. Copy and Move/index.html b/24. Copy and Move/index.html
@@ -0,0 +1,25 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Copy and Move</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <div class="btns-container">
+        <button class="copyBtn btn">Copy Text</button>
+      </div>
+      <textarea name="copyTxt" cols="50" rows="3">Hello World</textarea>
+    </div>
+
+    <div class="output-container">
+      <div class="output"></div>
+      <button class="moverBtn btn">Move Text</button>
+      <textarea name="finalTxt" cols="50" rows="3"></textarea>
+    </div>
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/24. Copy and Move/style.css b/24. Copy and Move/style.css
@@ -0,0 +1,70 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  background: blueviolet;
+  font-family: sans-serif;
+  display: grid;
+  grid-template-columns: 2fr 2fr;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-right: 2px solid white;
+}
+
+.btns-container {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 20px;
+}
+
+.btn {
+  padding: 10px 20px;
+  margin: 10px;
+  cursor: pointer;
+}
+
+textarea {
+  margin: 10px;
+  outline: none;
+}
+
+.output-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  position: relative;
+  transition: 1s all ease;
+}
+
+button {
+  background-color: rgb(6, 2, 15);
+  border: none;
+  color: #fff;
+  font-weight: bold;
+}
+
+/* JavaScript */
+.added {
+  position: absolute;
+  bottom: 35px;
+  right: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  background: #000;
+  color: white;
+  width: 200px;
+  height: 50px;
+}
