formatted whole code

dsabre · Nov 10, 2023 · 7f510e4 · 7f510e4
1 parent ca85390
commit 7f510e4
Show file tree

Hide file tree

Showing 14 changed files with 157 additions and 70 deletions.
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
@@ -3,15 +3,14 @@
 @import './flowbite-pro-2.css';
 @import './flowbite-pro-3.css'; */
 
-
-body{
+body {
     @apply bg-white dark:bg-gray-900 text-gray-900 dark:text-white;
 }
 
-h1{
+h1 {
     @apply text-4xl font-bold text-gray-900 dark:text-white;
 }
 
-h2{
+h2 {
     @apply text-2xl font-bold text-gray-900 dark:text-white;
-}
+}
diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
diff --git a/src/components/FunctionCode.vue b/src/components/FunctionCode.vue
@@ -70,6 +70,8 @@ nextTick(() => hljs.highlightElement(codeHolder.value));
             </button>
         </div>
 
-        <pre class="text-xs sm:text-sm border dark:border-gray-800"><code ref="codeHolder" :class="`language-${lang}`" v-html="code"></code></pre>
+        <pre
+            class="text-xs sm:text-sm border dark:border-gray-800"
+        ><code ref="codeHolder" :class="`language-${lang}`" v-html="code"></code></pre>
     </div>
 </template>
diff --git a/src/main.js b/src/main.js
@@ -1,12 +1,12 @@
-import './assets/css/main.css'
+import './assets/css/main.css';
 import 'flowbite/dist/flowbite.min.js';
 
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
+import {createApp} from 'vue';
+import App from './App.vue';
+import router from './router';
 
-const app = createApp(App)
+const app = createApp(App);
 
-app.use(router)
+app.use(router);
 
-app.mount('#app')
+app.mount('#app');
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -1,10 +1,7 @@
-<script setup>
-</script>
+<script setup></script>
 
 <template>
     <div>
         <h1>TS-JS functions</h1>
-
-
     </div>
 </template>
diff --git a/src/views/functions/downloadFile.vue b/src/views/functions/downloadFile.vue
@@ -1,7 +1,8 @@
 <script setup>
 import FunctionCode from '@/components/FunctionCode.vue';
 
-const description = 'Function that takes two arguments - filename and content. It creates a new &lt;a&gt; element, sets its href attribute to a data URL that contains the given content as plain text, and sets its download attribute to the given filename. It then adds this element to the DOM, triggers a click on the element to download the file, and finally removes the element from the DOM.';
+const description =
+    'Function that takes two arguments - filename and content. It creates a new &lt;a&gt; element, sets its href attribute to a data URL that contains the given content as plain text, and sets its download attribute to the given filename. It then adds this element to the DOM, triggers a click on the element to download the file, and finally removes the element from the DOM.';
 </script>
 
 <template>
@@ -10,10 +11,13 @@ const description = 'Function that takes two arguments - filename and content. I
 
         <div v-if="description">
             <h2>Description</h2>
-            <p class="text-gray-900 dark:text-white text-justify" v-html="description"/>
+            <p class="text-gray-900 dark:text-white text-justify" v-html="description" />
         </div>
 
-        <FunctionCode title="Typescript" lang="typescript" code="const downloadFile = (filename: string, content: string): void => {
+        <FunctionCode
+            title="Typescript"
+            lang="typescript"
+            code="const downloadFile = (filename: string, content: string): void => {
     const element = document.createElement('a');
     element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content));
     element.setAttribute('download', filename);
@@ -24,9 +28,13 @@ const description = 'Function that takes two arguments - filename and content. I
     element.click();
     
     document.body.removeChild(element);
-};"/>
+};"
+        />
 
-        <FunctionCode title="Javascript" lang="javascript" code="const downloadFile = (filename, content) => {
+        <FunctionCode
+            title="Javascript"
+            lang="javascript"
+            code="const downloadFile = (filename, content) => {
     const element = document.createElement('a');
     element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content));
     element.setAttribute('download', filename);
@@ -37,13 +45,18 @@ const description = 'Function that takes two arguments - filename and content. I
     element.click();
     
     document.body.removeChild(element);
-};"/>
+};"
+        />
 
-        <FunctionCode title="Example" lang="javascript" code="import { downloadFile } from './downloadFile';
+        <FunctionCode
+            title="Example"
+            lang="javascript"
+            code="import { downloadFile } from './downloadFile';
 
 const myFilename = 'myFile.txt';
 const myText = 'This is some sample text to be written to the file.';
 
-downloadFile(myFilename, myText);" />
+downloadFile(myFilename, myText);"
+        />
     </div>
 </template>
diff --git a/src/views/functions/getClonedObject.vue b/src/views/functions/getClonedObject.vue
@@ -1,7 +1,8 @@
 <script setup>
 import FunctionCode from '@/components/FunctionCode.vue';
 
-const description = 'It creates a new object or array by cloning the given object using the JSON stringify and parse methods.';
+const description =
+    'It creates a new object or array by cloning the given object using the JSON stringify and parse methods.';
 </script>
 
 <template>
@@ -10,11 +11,19 @@ const description = 'It creates a new object or array by cloning the given objec
 
         <div v-if="description">
             <h2>Description</h2>
-            <p class="text-gray-900 dark:text-white text-justify" v-html="description"/>
+            <p class="text-gray-900 dark:text-white text-justify" v-html="description" />
         </div>
 
-        <FunctionCode title="Typescript" lang="typescript" code="const getClonedObject = (object: object | unknown[]): object | unknown[] => JSON.parse(JSON.stringify(object));" />
+        <FunctionCode
+            title="Typescript"
+            lang="typescript"
+            code="const getClonedObject = (object: object | unknown[]): object | unknown[] => JSON.parse(JSON.stringify(object));"
+        />
 
-        <FunctionCode title="Javascript" lang="javascript" code="const getClonedObject = (object) => JSON.parse(JSON.stringify(object));" />
+        <FunctionCode
+            title="Javascript"
+            lang="javascript"
+            code="const getClonedObject = (object) => JSON.parse(JSON.stringify(object));"
+        />
     </div>
 </template>
diff --git a/src/views/functions/getElementHeight.vue b/src/views/functions/getElementHeight.vue
@@ -1,7 +1,8 @@
 <script setup>
 import FunctionCode from '@/components/FunctionCode.vue';
 
-const description = 'Get the height in pixel of a given query selector.<br><u>Pay attention:</u> the selector must point to only one DOM element, otherwise the function will return the height of the first matching element.';
+const description =
+    'Get the height in pixel of a given query selector.<br><u>Pay attention:</u> the selector must point to only one DOM element, otherwise the function will return the height of the first matching element.';
 </script>
 
 <template>
@@ -10,10 +11,13 @@ const description = 'Get the height in pixel of a given query selector.<br><u>Pa
 
         <div v-if="description">
             <h2>Description</h2>
-            <p class="text-gray-900 dark:text-white text-justify" v-html="description"/>
+            <p class="text-gray-900 dark:text-white text-justify" v-html="description" />
         </div>
 
-        <FunctionCode title="Typescript" lang="typescript" code="const getElementHeight = (querySelector: string): number => {
+        <FunctionCode
+            title="Typescript"
+            lang="typescript"
+            code="const getElementHeight = (querySelector: string): number => {
     const el: HTMLElement | null = document.querySelector(querySelector);
 
     if(!el){
@@ -27,9 +31,13 @@ const description = 'Get the height in pixel of a given query selector.<br><u>Pa
     });
     
     return elHeight;
-};" />
+};"
+        />
 
-        <FunctionCode title="Javascript" lang="javascript" code="const getElementHeight = (querySelector) => {
+        <FunctionCode
+            title="Javascript"
+            lang="javascript"
+            code="const getElementHeight = (querySelector) => {
     const el = document.querySelector(querySelector);
 
     if(!el){
@@ -43,6 +51,7 @@ const description = 'Get the height in pixel of a given query selector.<br><u>Pa
     });
     
     return elHeight;
-};" />
+};"
+        />
     </div>
 </template>
diff --git a/src/views/functions/getFormData.vue b/src/views/functions/getFormData.vue
@@ -10,25 +10,33 @@ const description = 'Return an object from a submitted form data.';
 
         <div v-if="description">
             <h2>Description</h2>
-            <p class="text-gray-900 dark:text-white text-justify" v-html="description"/>
+            <p class="text-gray-900 dark:text-white text-justify" v-html="description" />
         </div>
 
-        <FunctionCode title="Typescript" lang="typescript" code="const getFormData = &amp;lt;T&amp;gt;(event: Event): T => {
+        <FunctionCode
+            title="Typescript"
+            lang="typescript"
+            code="const getFormData = &amp;lt;T&amp;gt;(event: Event): T => {
     const formData = new FormData(event.target as HTMLFormElement);
     const object: {[key: string]: unknown} = {};
 
     formData.forEach((value: unknown, key: string) => object[key] = value);
 
     return object as T;
-};" />
-
-        <FunctionCode title="Javascript" lang="javascript" code="const getFormData = (event) => {
+};"
+        />
+
+        <FunctionCode
+            title="Javascript"
+            lang="javascript"
+            code="const getFormData = (event) => {
     const formData = new FormData(event.target);
     const object   = {};
 
     formData.forEach((value, key) => object[key] = value);
 
     return object;
-};" />
+};"
+        />
     </div>
 </template>
diff --git a/src/views/functions/ifNaN.vue b/src/views/functions/ifNaN.vue
@@ -1,7 +1,8 @@
 <script setup>
 import FunctionCode from '@/components/FunctionCode.vue';
 
-const description = 'Function that takes two arguments - number and defaultRet. It checks whether the given number is NaN (Not a Number) or not, and returns defaultRet if the number is indeed NaN.';
+const description =
+    'Function that takes two arguments - number and defaultRet. It checks whether the given number is NaN (Not a Number) or not, and returns defaultRet if the number is indeed NaN.';
 </script>
 
 <template>
@@ -10,20 +11,32 @@ const description = 'Function that takes two arguments - number and defaultRet.
 
         <div v-if="description">
             <h2>Description</h2>
-            <p class="text-gray-900 dark:text-white text-justify" v-html="description"/>
+            <p class="text-gray-900 dark:text-white text-justify" v-html="description" />
         </div>
 
-        <FunctionCode title="Typescript" lang="typescript" code="const ifNaN = (number: number, defaultRet: number = 0): number => isNaN(number) ? defaultRet : number;" />
+        <FunctionCode
+            title="Typescript"
+            lang="typescript"
+            code="const ifNaN = (number: number, defaultRet: number = 0): number => isNaN(number) ? defaultRet : number;"
+        />
 
-        <FunctionCode title="Javascript" lang="javascript" code="const ifNaN = (number, defaultRet = 0) => isNaN(number) ? defaultRet : number;" />
+        <FunctionCode
+            title="Javascript"
+            lang="javascript"
+            code="const ifNaN = (number, defaultRet = 0) => isNaN(number) ? defaultRet : number;"
+        />
 
-        <FunctionCode title="Example" lang="javascript" code="import { ifNaN } from './ifNaN';
+        <FunctionCode
+            title="Example"
+            lang="javascript"
+            code="import { ifNaN } from './ifNaN';
 
 const myNumber = 5;
 const myNaN = NaN;
 
 const result1 = ifNaN(myNumber); // returns 5
 const result2 = ifNaN(myNaN); // returns 0
-const result3 = ifNaN(myNaN, 10); // returns 10" />
+const result3 = ifNaN(myNaN, 10); // returns 10"
+        />
     </div>
 </template>
diff --git a/src/views/functions/makeId.vue b/src/views/functions/makeId.vue
@@ -10,27 +10,35 @@ const description = 'Generate and return a random string of a given length.';
 
         <div v-if="description">
             <h2>Description</h2>
-            <p class="text-gray-900 dark:text-white text-justify" v-html="description"/>
+            <p class="text-gray-900 dark:text-white text-justify" v-html="description" />
         </div>
 
-        <FunctionCode title="Typescript" lang="typescript" code="const makeId = (length: number): string => {
+        <FunctionCode
+            title="Typescript"
+            lang="typescript"
+            code="const makeId = (length: number): string => {
     let result = '';
     const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
     const charactersLength = characters.length;
     for (let i = 0; i &amp;lt; length; i++) {
         result += characters.charAt(Math.floor(Math.random() * charactersLength));
     }
     return result;
-};" />
+};"
+        />
 
-        <FunctionCode title="Javascript" lang="javascript" code="const makeId = (length) => {
+        <FunctionCode
+            title="Javascript"
+            lang="javascript"
+            code="const makeId = (length) => {
     let result = '';
     const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
     const charactersLength = characters.length;
     for (let i = 0; i &amp;lt; length; i++) {
         result += characters.charAt(Math.floor(Math.random() * charactersLength));
     }
     return result;
-};" />
+};"
+        />
     </div>
 </template>
diff --git a/src/views/functions/padLeft.vue b/src/views/functions/padLeft.vue
@@ -10,19 +10,27 @@ const description = 'Left pad a string to a certain length with another string.'
 
         <div v-if="description">
             <h2>Description</h2>
-            <p class="text-gray-900 dark:text-white text-justify" v-html="description"/>
+            <p class="text-gray-900 dark:text-white text-justify" v-html="description" />
         </div>
 
-        <FunctionCode title="Typescript" lang="typescript" code="const padLeft = const padLeft = (value: unknown, strLength: number, chr: string = '0'): string => {
+        <FunctionCode
+            title="Typescript"
+            lang="typescript"
+            code="const padLeft = const padLeft = (value: unknown, strLength: number, chr: string = '0'): string => {
     const val = String(value);
     const len = strLength - val.length;
     return len > 0 ? chr.repeat(len) + val : val;
-};" />
+};"
+        />
 
-        <FunctionCode title="Javascript" lang="javascript" code="const padLeft = const padLeft = (value, strLength, chr) => {
+        <FunctionCode
+            title="Javascript"
+            lang="javascript"
+            code="const padLeft = const padLeft = (value, strLength, chr) => {
     const val = value + '';
     const len = strLength - val.length;
     return len > 0 ? chr.repeat(len) + val : val;
-};" />
+};"
+        />
     </div>
 </template>