added more styles to button, input, output

2 files changed, 41 insertions, 8 deletions

diff --git a/website/main.js b/website/main.js
index 9c9c456..fe676e0 100644
--- a/website/main.js
+++ b/website/main.js
@@ -1,6 +1,8 @@
 const input = document.getElementById("input");
 const output = document.getElementById("output");
 const copyBtn = document.getElementById("copyBtn");
+let currentCopy = "";
+var res = "";
 
 const match = `\`\`
 1¡
@@ -122,7 +124,6 @@ function convert(input, mode) {
 
 function autoConvert() {
     var mode = null;
-    var res = "";
     for (var i = 0; i < input.value.length; i++) {
         if (mode != null) {
             break;
@@ -134,11 +135,30 @@ function autoConvert() {
     }
     res = convert(input.value, mode);
     output.innerText = res;
-    window.requestAnimationFrame(autoConvert);
+
+    // for css
+    if (input.value != '') {
+        console.log(input.value)
+        output.classList.add('havOutput');
+    } else {
+        output.classList.remove('havOutput');
+    }
+    if (currentCopy != res) {
+        copyBtn.removeAttribute('disabled', true)
+    } else {
+        console.log(currentCopy, res)
+    }
+    return res
 }
 
-copyBtn.addEventListener("click", (event) => {
+
+
+copyBtn.onclick = event => {
     navigator.clipboard.writeText(output.value);
-});
+    currentCopy = res;
+    copyBtn.setAttribute('disabled', true)
+}
 
-autoConvert();
\ No newline at end of file
+input.oninput = event => {
+    autoConvert();
+}
\ No newline at end of file
diff --git a/website/style.css b/website/style.css
index e30e257..4015b0c 100644
--- a/website/style.css
+++ b/website/style.css
@@ -41,17 +41,26 @@ textarea:focus {
     border: #181A1B 1px solid;
 }
 
+#input:focus {
+    background: #1E2021 
+}
+
 #output {
     resize: none;
-    background: #1E2021;
+    background: #141414;
+}
+
+.havOutput {
+    background: #1E2021 !important;
 }
 
 #copyBtn {
     background: #141414;
     border: #181A1B 1px solid;
     padding: 10px;
-    border-radius: 16px;
+    border-radius: 8px;
     transition: all 0.3s;
+    width: 100%;
 }
 
 #copyBtn:focus {
@@ -59,5 +68,9 @@ textarea:focus {
 }
 
 #copyBtn:hover {
-    background: #1E2021;
+    background: #1e202153;
+}
+
+#copyBtn:disabled {
+    background: #1E2021
 }
\ No newline at end of file