add swap button

Author: TheBestTvarynka

img/replace1.png

@@ -34,6 +34,9 @@
                 <option value="base64">Base64</option>
                 <option value="ascii">Aescii</option>
             </select>
+            <div class="paramTool" onclick="swap()">
+                <img src="../img/replace1.png" alt="copy" />
+            </div>
         </div>
         <textarea id="inData" placeholder="Input data..." rows="7"></textarea>
         <button onclick="decode()">convert</button>

src/index.html

@@ -92,3 +92,21 @@ const decode = () => {
 };
 
 const copyOutputData = () => navigator.clipboard.writeText(document.getElementById('outData').value);
+
+const swap = () => {
+  const inType = document.getElementById('inType');
+  const outType = document.getElementById('outType');
+
+  let buf = inType.selectedOptions[0].value;
+
+  inType.value = outType.selectedOptions[0].value;
+  outType.value = buf;
+
+  const inData = document.getElementById('inData');
+  const outData = document.getElementById('outData');
+
+  buf = inData.value;
+
+  inData.value = outData.value;
+  outData.value = buf;
+}

src/script.js

@@ -34,6 +34,26 @@ article {
     display: inline-flex;
     margin-top: 1em;
     gap: 0.5em;
+    align-items: center;
+}
+
+.paramTool {
+    display: inline-flex;
+    cursor: pointer;
+    height: 1.5em;
+    width: fit-content;
+    padding: 0.2em;
+    border-radius: 0.3em;
+    justify-content: center;
+    align-items: center;
+}
+
+.paramTool:hover {
+    background-color: aliceblue;
+}
+
+.paramTool>img {
+    height: 90%;
 }
 
 button {