Add % of number tool

src/router/index.js

@@ -3,19 +3,15 @@ import { createRouter, createWebHistory } from "vue-router";
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-    /**
-     * General
-     */
     {
       path: "/",
       name: "home",
       component: () => import("../views/HomeView.vue"),
     },
-    {
-      path: "/explain_crontab",
-      name: "explain_crontab",
-      component: () => import("../views/unix/ExplainCrontab.vue"),
-    },
+
+    /**
+     * General
+     */
     {
       path: "/table_to_markdown_table",
       name: "table_to_markdown_table",
@@ -26,40 +22,15 @@ const router = createRouter({
       name: "table_to_mediawiki_table",
       component: () => import("../views/general/TableToMediawikiTable.vue"),
     },
-    {
-      path: "/dummy_image",
-      name: "dummy_image",
-      component: () => import("../views/generators/DummyImage.vue"),
-    },
     {
       path: "/humans_txt",
       name: "humans_txt",
       component: () => import("../views/general/HumansTxt.vue"),
     },
     {
-      path: "/qr_code",
-      name: "qr_code",
-      component: () => import("../views/generators/QRCode.vue"),
-    },
-    {
-      path: "/unix_timestamp",
-      name: "unix_timestamp",
-      component: () => import("../views/unix/UnixTimestamp.vue"),
-    },
-    {
-      path: "/file_base64_encode_decode",
-      name: "file_base64_encode_decode",
-      component: () => import("../views/unix/FileBase64EncodeDecode.vue"),
-    },
-    {
-      path: "/sed_generator",
-      name: "sed_generator",
-      component: () => import("../views/unix/SedGenerator.vue"),
-    },
-    {
-      path: "/htaccess_generator",
-      name: "htaccess_generator",
-      component: () => import("../views/unix/HtaccessGenerator.vue"),
+      path: "/percent_of_number",
+      name: "%_of_number",
+      component: () => import("../views/general/PercentOfNumber.vue"),
     },
 
     /**
@@ -191,6 +162,49 @@ const router = createRouter({
       component: () => import("../views/sql/Formatter.vue"),
     },
 
+    /**
+     * Generators
+     */
+    {
+      path: "/dummy_image",
+      name: "dummy_image",
+      component: () => import("../views/generators/DummyImage.vue"),
+    },
+    {
+      path: "/qr_code",
+      name: "qr_code",
+      component: () => import("../views/generators/QRCode.vue"),
+    },
+
+    /**
+     * Unix
+     */
+    {
+      path: "/unix_timestamp",
+      name: "unix_timestamp",
+      component: () => import("../views/unix/UnixTimestamp.vue"),
+    },
+    {
+      path: "/file_base64_encode_decode",
+      name: "file_base64_encode_decode",
+      component: () => import("../views/unix/FileBase64EncodeDecode.vue"),
+    },
+    {
+      path: "/sed_generator",
+      name: "sed_generator",
+      component: () => import("../views/unix/SedGenerator.vue"),
+    },
+    {
+      path: "/htaccess_generator",
+      name: "htaccess_generator",
+      component: () => import("../views/unix/HtaccessGenerator.vue"),
+    },
+    {
+      path: "/explain_crontab",
+      name: "explain_crontab",
+      component: () => import("../views/unix/ExplainCrontab.vue"),
+    },
+
     /**
      * Other
      */

src/stores/toolsStore.js

@@ -24,6 +24,7 @@ export const useToolsStore = defineStore("tools", {
         table_to_markdown_table: "Table to Markdown table",
         table_to_mediawiki_table: "Table to Mediawiki table",
         humans_txt: "humans.txt generator",
+        "%_of_number": "% of number",
       },
       Docker: {
         docker_rename_volume: "Rename volume",

src/views/general/PercentOfNumber.vue

@@ -0,0 +1,65 @@
+<template>
+  <h2 class="tool-title">Percent of number</h2>
+  <hr class="mt-5 mb-5" />
+
+  <div class="input-group">
+    <label for="number">Calculate what percentage is</label>
+    <div>
+      <input
+        id="number"
+        v-model.number="toolData.number1"
+        v-on:keyup="result"
+        type="number"
+      />
+      of
+      <input
+        id="number"
+        v-model.number="toolData.number2"
+        v-on:keyup="result"
+        type="number"
+      />
+    </div>
+  </div>
+
+  <hr class="mt-5 mb-5" />
+
+  <div class="input-group">
+    <label for="result">Result</label>
+    <MonacoEditor
+      name="result"
+      language="php"
+      :value="toolResult"
+    ></MonacoEditor>
+  </div>
+</template>
+
+<script>
+import MonacoEditor from "@/components/MonacoEditor.vue";
+
+export default {
+  components: { MonacoEditor },
+  data() {
+    return {
+      toolData: {
+        number1: null,
+        number2: null,
+      },
+      toolResult: '',
+    };
+  },
+  methods: {
+    result() {
+      if (
+        this.toolData.number1 === null ||
+        this.toolData.number2 === null ||
+        this.toolData.number2 === 0 // Prevent division by zero
+      ) {
+        this.toolResult = null;
+        return;
+      }
+
+      this.toolResult = ((this.toolData.number1 / this.toolData.number2) * 100).toFixed(2);
+    },
+  },
+};
+</script>