Entry status color added.

assets/css/styles.scss

@@ -270,3 +270,16 @@ ol li {
 .sv-error-response {
   background-color: #b71c1c;
 }
+
+fieldset#history {
+  .method-list-item {
+    position: relative;
+
+    span {
+      position: absolute;
+      top: 32px;
+      right: 8px;
+      color: #E0E0E0;
+    }
+  }
+}

components/section.vue

@@ -1,5 +1,5 @@
 <template>
-    <fieldset :class="{ 'no-colored-frames': noFrameColors }">
+    <fieldset :id="label.toLowerCase()" :class="{ 'no-colored-frames': noFrameColors }">
         <legend @click.prevent="collapse">{{ label }} ↕</legend>
         <div class="collapsible" :class="{ hidden: collapsed }">
             <slot />

pages/index.vue

@@ -156,17 +156,19 @@
           <label for="time">Time</label>
           <input name="time" type="text" readonly :value="entry.time">
         </li>
-        <li>
-          <label for="name">Method</label>
-          <input name="name" type="text" readonly :value="entry.method">
+        <li class="method-list-item">
+          <label for="method">Method</label>
+          <input name="method" type="text" readonly
+                 :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">
+          <span class="entry-status-code">{{entry.status}}</span>
         </li>
         <li>
-          <label for="name">URL</label>
-          <input name="name" type="text" readonly :value="entry.url">
+          <label for="url">URL</label>
+          <input name="url" type="text" readonly :value="entry.url">
         </li>
         <li>
-          <label for="name">Path</label>
-          <input name="name" type="text" readonly :value="entry.path">
+          <label for="path">Path</label>
+          <input name="path" type="text" readonly :value="entry.path">
         </li>
         <li>
           <label for="delete">&nbsp;</label>
@@ -183,6 +185,15 @@
 </template>
 
 <script>
+      const statusCategories = [
+        {name: 'informational', statusCodeRegex: new RegExp(/[1][0-9]+/), className: 'info-response'},
+        {name: 'successful', statusCodeRegex: new RegExp(/[2][0-9]+/), className: 'success-response'},
+        {name: 'redirection', statusCodeRegex: new RegExp(/[3][0-9]+/), className: 'redir-response'},
+        {name: 'client error', statusCodeRegex: new RegExp(/[4][0-9]+/), className: 'cl-error-response'},
+        {name: 'server error', statusCodeRegex: new RegExp(/[5][0-9]+/), className: 'sv-error-response'},
+      ];
+
+
       const parseHeaders = xhr => {
           const headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/);
           const headerMap = {};
@@ -195,6 +206,8 @@
           return headerMap
       };
 
+      const findStatusGroup = responseStatus => statusCategories.find(status => status.statusCodeRegex.test(responseStatus));
+
       import section from "../components/section";
 
       export default {
@@ -224,13 +237,7 @@
       },
       computed: {
           statusCategory(){
-            return [
-              {name: 'informational', statusCodeRegex: new RegExp(/[1][0-9]+/), className: 'info-response'},
-              {name: 'successful', statusCodeRegex: new RegExp(/[2][0-9]+/), className: 'success-response'},
-              {name: 'redirection', statusCodeRegex: new RegExp(/[3][0-9]+/), className: 'redir-response'},
-              {name: 'client error', statusCodeRegex: new RegExp(/[4][0-9]+/), className: 'cl-error-response'},
-              {name: 'server error', statusCodeRegex: new RegExp(/[5][0-9]+/), className: 'sv-error-response'},
-            ].find(status => status.statusCodeRegex.test(this.response.status));
+            return findStatusGroup(this.response.status);
           },
           noHistoryToClear() {
               return this.history.length === 0;
@@ -280,6 +287,9 @@
           }
       },
       methods: {
+          findEntryStatus(entry){
+            return findStatusGroup(entry.status);
+          },
           deleteHistory(entry) {
               this.history.splice(this.history.indexOf(entry), 1)
               window.localStorage.setItem('history', JSON.stringify(this.history))
@@ -301,17 +311,6 @@
               })
           },
           sendRequest() {
-              if (!this.isValidURL) {
-                  alert('Please check the formatting of the URL');
-                  return
-              }
-              const n = new Date().toLocaleTimeString()
-              this.history = [{
-                  time: n,
-                  method: this.method,
-                  url: this.url,
-                  path: this.path
-              }, ...this.history]
               window.localStorage.setItem('history', JSON.stringify(this.history))
               if (this.$refs.response.$el.classList.contains('hidden')) {
                   this.$refs.response.$el.classList.toggle('hidden')
@@ -344,6 +343,19 @@
                 } else {
                   this.response.body = xhr.responseText
                 }
+
+                if (!this.isValidURL) {
+                  alert('Please check the formatting of the URL');
+                  return
+                }
+                const n = new Date().toLocaleTimeString()
+                this.history = [{
+                  status: xhr.status,
+                  time: n,
+                  method: this.method,
+                  url: this.url,
+                  path: this.path
+                }, ...this.history]
               }
               xhr.onerror = e => {
                   this.response.status = xhr.status