add copy button

Author: TheBestTvarynka

img/copy.png

@@ -37,7 +37,12 @@
         </div>
         <textarea id="inData" placeholder="Input data..." rows="7"></textarea>
         <button onclick="decode()">convert</button>
-        <textarea id="outData" placeholder="Outout data..." readonly rows="7">fref</textarea>
+        <textarea id="outData" placeholder="Outout data..." readonly rows="7">The output data will be here</textarea>
+        <div class="tools">
+            <div class="tool" onclick="copyOutputData()">
+                <img src="../img/copy.png" alt="copy" />
+            </div>
+        </div>
     </article>
     <footer>
         <span>Bytes formatter Copyright © 2022 Pavlo Myroniuk; released as <a

src/index.html

@@ -90,3 +90,5 @@ const decode = () => {
 
   outData.value = value;
 };
+
+const copyOutputData = () => navigator.clipboard.writeText(document.getElementById('outData').value);

src/script.js

@@ -1,4 +1,3 @@
-
 body {
     font-family: 'Source Code Pro', monospace;
     padding: 0;
@@ -49,6 +48,31 @@ textarea {
     font-family: 'Source Code Pro', monospace;
 }
 
+.tools {
+    width: 100%;
+    display: inline-flex;
+    margin-top: 0.7em;
+}
+
+.tool {
+    display: inline-flex;
+    cursor: pointer;
+    height: 2em;
+    width: fit-content;
+    padding: 0.1em;
+    border-radius: 0.2em;
+    justify-content: center;
+    align-items: center;
+}
+
+.tool:hover {
+    background-color: aliceblue;
+}
+
+.tool>img {
+    height: 90%;
+}
+
 footer {
     width: 70%;
     display: flex;
@@ -58,7 +82,7 @@ footer {
     margin-top: 2em;
 }
 
-footer > span {
+footer>span {
     margin: 1em;
     text-align: center;
-}
+}