Added validation for URL

index.html

@@ -91,7 +91,7 @@
           </li>
           <li>
             <label for="url">URL</label>
-            <input v-model="url">
+            <input type="url" v-bind:class="{ error: urlNotValid }" v-model="url">
           </li>
           <li>
             <label for="path">Path</label>
@@ -99,7 +99,7 @@
           </li>
           <li>
             <label for="action">&nbsp;</label>
-            <button name="action" @click="sendRequest">Send</button>
+            <button v-bind:class="{ disabled: urlNotValid }" name="action" @click="sendRequest">Send</button>
           </li>
         </ul>
       </div>

script.js

@@ -29,6 +29,11 @@ const app = new Vue({
     history: window.localStorage.getItem("history") ? JSON.parse(window.localStorage.getItem("history")) : []
   },
   computed: {
+
+    urlNotValid() {
+      return !(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g.test(this.url))
+    },
+
     rawRequestBody() {
       const {
         bodyParams
@@ -86,6 +91,12 @@ const app = new Vue({
       document.getElementsByClassName(el)[0].classList.toggle('hidden')
     },
     sendRequest() {
+
+      if (this.urlNotValid) {
+        alert("Please check the formatting of the URL")
+        return
+      }
+
       const n = new Date().toLocaleTimeString()
       
       // Latest requests should be placed on top

style.css

@@ -2,6 +2,7 @@
   --bg-color: #121212;
   --fg-color: #fff;
   --ac-color: #51FF0D;
+  --err-color: #FF0000;
 }
 
 * {
@@ -164,6 +165,15 @@ textarea {
   font-family: monospace;
 }
 
+.error {
+  border: 1px solid var(--err-color);
+}
+
+.disabled {
+  background-color: #3C3C3C;
+  color: #B3B3B3;
+}
+
 label {
   padding: 4px;
 }