feat: Add copy to clipboard

Add a new feature to copy to clipboard. Also add a bit o styling to make
it nicer to the eyes.

1 files changed, 32 insertions, 8 deletions

diff --git a/index.html b/index.html
index 65ee3f8..54231b4 100644
--- a/index.html
+++ b/index.html
@@ -32,7 +32,7 @@ header {
     margin-bottom: 20px;
     background: #0062cc;
     padding: 10px;
-    max-width: 900px;
+    max-width: 960px;
 }
 
 nav {
@@ -58,6 +58,11 @@ nav {
   cursor: pointer;
   color: #000;
   border-radius: 0;
+  text-decoration: none;
+}
+
+.btn:hover {
+    background-color: #fff;
 }
 
 nav li {
@@ -90,7 +95,7 @@ main {
             <nav>
                 <ul>
                     <li>
-                    <a class="btn" href="https://git.sr.ht/~gabrielgio/tres">Código fonte</a>
+                    <a class="btn" href="https://git.sr.ht/~gabrielgio/tres">Código fonte ➤</a>
                     </li>
                 </ul>
             </nav>
@@ -111,7 +116,8 @@ main {
                 </p>
             </div>
             <div class="section">
-                <input type="button" class="btn" value="Calcular" onclick="eval()">
+                <input type="button" style="margin-right: 10px" class="btn" value="CALCULAR" onclick="eval()">
+                <input type="button" id="copy" class="btn" value="COPIAR ⎘" onclick="copy()">
             </div>
         </main>
 
@@ -119,9 +125,31 @@ main {
 const aInput = document.getElementById('a')
 const bInput = document.getElementById('b')
 const cInput = document.getElementById('c')
+const copyInput = document.getElementById('copy')
 const resultadoInput = document.getElementById('resultado')
 const warningParagraph = document.getElementById('warning')
 
+
+function warn(text) {
+    warningParagraph.textContent = text
+    warningParagraph.style.visibility = 'visible';
+    setTimeout(() => {
+        warningParagraph.style.visibility = 'hidden';
+    }, 3000)
+}
+
+function copy() {
+    if (resultadoInput.value === "") {
+        eval()
+    }
+    navigator.clipboard.writeText(resultadoInput.value)
+        .then(u => {
+            copyInput.value = "COPIADO ✓"
+            setTimeout(() => { copyInput.value = "COPIAR ⎘" }, 3000)
+        })
+        .catch(e => warn(e))
+}
+
 function cToP(v) {
     return v.replace(",", ".")
 }
@@ -141,11 +169,7 @@ function eval() {
         const result = calculate(...values).toFixed(3).replace(/\.0+$/,'')
         resultadoInput.value = pToC(result)
     } catch (e) {
-        warningParagraph.textContent = e
-        warningParagraph.style.visibility = 'visible';
-        setTimeout(() => {
-            warningParagraph.style.visibility = 'hidden';
-        }, 3000)
+        warn(e)
     }
 }