Add % of number tool

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>