feat(clear): added clear button to clear all inputs in one click

Author: technikhil314

pages/v2/index.vue

@@ -37,18 +37,7 @@
               aria-label="Beautify entered text"
               type="button"
               title="Beautify"
-              class="
-                absolute
-                p-2
-                transition-all
-                rounded-sm
-                top-16
-                right-3
-                aspect-square
-                dark:hover:bg-slate-600 dark:bg-slate-600/50
-                hover:bg-slate-300
-                bg-gray-300/50
-              "
+              class="absolute p-2 transition-all rounded-sm  top-16 right-3 aspect-square dark:hover:bg-slate-600 dark:bg-slate-600/50 hover:bg-slate-300 bg-gray-300/50"
               @click="
                 lhsEditor.trigger('editor', 'editor.action.formatDocument')
               "
@@ -88,18 +77,7 @@
               aria-label="Beautify entered text"
               type="button"
               title="Beautify"
-              class="
-                absolute
-                p-2
-                transition-all
-                rounded-sm
-                top-16
-                right-3
-                aspect-square
-                dark:hover:bg-slate-600 dark:bg-slate-600/50
-                hover:bg-slate-300
-                bg-gray-300/50
-              "
+              class="absolute p-2 transition-all rounded-sm  top-16 right-3 aspect-square dark:hover:bg-slate-600 dark:bg-slate-600/50 hover:bg-slate-300 bg-gray-300/50"
               @click="
                 rhsEditor.trigger('editor', 'editor.action.formatDocument')
               "
@@ -119,29 +97,52 @@
             </button>
           </div>
         </section>
-        <div class="self-end flex-grow-0 w-full mt-4 text-center">
+        <div
+          class="flex self-end justify-center flex-grow-0 w-full gap-4 mt-4 text-center "
+        >
           <button
             id="submitButton"
-            class="
-              inline-flex
-              items-center
-              justify-center
-              w-48
-              px-4
-              py-2
-              transition-transform
-              transform
-              bg-blue-600
-              rounded-md
-              shadow-lg
-              outline-none
-              text-gray-50
-              focus:ring-4
-              active:scale-y-75
-            "
+            class="inline-flex items-center justify-center w-48 gap-4 px-4 py-2 transition-transform transform bg-blue-600 rounded-md shadow-lg outline-none  text-gray-50 focus:ring-4 active:scale-y-75"
             aria-label="Click here to compare the inputted text blocks"
           >
             Compare
+            <span class="w-4 aspect-square">
+              <svg
+                viewBox="0 0 15 15"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                width="15"
+                height="15"
+              >
+                <path
+                  d="M13.5 7.5l-4-4m4 4l-4 4m4-4H1"
+                  stroke="currentColor"
+                ></path>
+              </svg>
+            </span>
+          </button>
+          <button
+            id="submitButton"
+            class="inline-flex items-center justify-center w-48 gap-4 px-4 py-2 text-gray-800 transition-transform transform bg-yellow-300 rounded-md shadow-lg outline-none  focus:ring-4 active:scale-y-75"
+            aria-label="Click here to clear all the inputs"
+            type="button"
+            @click="clear"
+          >
+            <span class="w-4 aspect-square">
+              <svg
+                viewBox="0 0 15 15"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                width="15"
+                height="15"
+              >
+                <path
+                  d="M4.5 3V1.5a1 1 0 011-1h4a1 1 0 011 1V3M0 3.5h15m-13.5 0v10a1 1 0 001 1h10a1 1 0 001-1v-10M7.5 7v5m-3-3v3m6-3v3"
+                  stroke="currentColor"
+                ></path>
+              </svg>
+            </span>
+            Clear
           </button>
         </div>
       </form>
@@ -272,6 +273,10 @@ export default Vue.extend({
         theme: 'error',
       })
     },
+    clear() {
+      this.lhsEditor.getModel().setValue('')
+      this.rhsEditor.getModel().setValue('')
+    },
   },
 })
 </script>