aboutsummaryrefslogtreecommitdiff
path: root/index.html
diff options
context:
space:
mode:
authorGabriel Arakaki Giovanini <mail@gabrielgio.me>2022-07-11 19:11:49 +0200
committerGabriel Arakaki Giovanini <mail@gabrielgio.me>2022-07-11 19:11:49 +0200
commit8e85f0079a59282724ebab9c7cd2c6037424f6c6 (patch)
tree4c3bd6a3d563ab3733d8ecc148625c4a305b2c0b /index.html
parent7bffa67a7fe434e6d163e50bbf86f57fa0ee5b66 (diff)
downloadtres-8e85f0079a59282724ebab9c7cd2c6037424f6c6.tar.gz
tres-8e85f0079a59282724ebab9c7cd2c6037424f6c6.tar.bz2
tres-8e85f0079a59282724ebab9c7cd2c6037424f6c6.zip
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.
Diffstat (limited to 'index.html')
-rw-r--r--index.html40
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)
}
}