feat: added Character counter tool

src/constants/tools.ts

@@ -256,6 +256,15 @@ export const TOOLS: Tool[] = [
         template: '<data-unit-convertor></data-unit-convertor>',
         icon: 'floppy-disk',
         tags: ['data', 'unit', 'convertor', 'bytes', 'kb', 'mb', 'gb', 'tb', 'pb', 'eb', 'zb', 'yb', 'bit', 'information'],
+    },
+     {
+        id: 'character-counter',
+        label: 'Character Counter',
+        version: '1.0.0',
+        category: ToolCategory.Util,
+        template: '<character-counter></character-counter>',
+        icon: 'rectangle-ellipsis',
+        tags: ['character', 'counter', 'length'],
     },
     {
         id: 'unix-path-convertor',

src/tools/components/character-counter/CharacterCounter.ts

@@ -0,0 +1,122 @@
+import { html, css } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { BaseTool } from '../../base/BaseTool';
+
+@customElement('character-counter')
+export class CharacterCounter extends BaseTool {
+    @state() private input = 'This a text message';
+    @state() private count: number = 0;
+    @state() private alert: { type: 'error' | 'warning'; message: string } | null = null;
+
+    private styles = css`
+        ${BaseTool.styles}
+    `;
+
+    constructor() {
+        super();
+        this.updateCount();
+    }
+
+    protected renderTool() {
+        return html`
+            <style>${this.styles}</style>
+            <div class="tool-inner-container">
+                <p class="opacity-75">Character Counter allows you to count your string characters length.</p>
+                <hr />
+
+                <!-- Input Field -->
+                <div class="relative flex items-center mt-2">
+                    <div class="flex w-full">
+                        <input 
+                            type="text" 
+                            class="flex-grow"
+                            placeholder="Enter value..."
+                            .value=${this.input}
+                            @input=${this.handleInput}
+                        />
+                    </div>
+                    <div class="absolute right-0 top-0.5 pr-0.5 flex justify-items-center">
+                        <tool-tooltip text="Clear">
+                            <button class="btn-icon" id="clear" @click=${this.clearAll}>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+                            </button>
+                        </tool-tooltip>
+                    </div>
+                </div>
+
+                ${this.alert ? html`
+                    <tool-alert
+                        .type=${this.alert.type}
+                        .message=${this.alert.message}
+                    ></tool-alert>
+                ` : ''}
+
+                <!-- Arrow Divider -->
+                <div class="flex justify-center my-2 opacity-75">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
+                </div>
+
+                <!-- Conversion Results -->
+                <div class="mt-2">
+                    ${this.renderConversionRow(this.count)}
+                </div>
+            </div>
+        `;
+    }
+
+    private renderConversionRow(counted: number) {        
+        return html`
+            <div class="mb-2">
+                <div class="flex items-center gap-6">
+                    <!-- Bytes Column -->
+                    <div class="w-full flex items-center">
+                        <div class="w-8 text-xs">Count</div>
+                        <input 
+                            type="text" 
+                            class="font-mono flex-1 !bg-transparent text-sm" 
+                            .value="${counted}"
+                            readonly
+                        />
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+
+    private handleInput(e: InputEvent) {
+        const input = e.target as HTMLInputElement;
+        this.input = input.value;
+
+        if (this.input && !/^[0-9]*\.?[0-9]*$/.test(this.input)) {
+            this.alert = {
+                type: 'error',
+                message: 'Please enter a valid number'
+            };
+            return;
+        } else {
+            this.alert = null;
+        }
+
+        this.updateCount();
+    }
+
+    private clearAll() {
+        this.input = '';
+        this.alert = null;
+        this.updateCount();
+    }
+
+    private updateCount() {
+        if (!this.input || isNaN(Number(this.input))) {
+            this.count = 0;
+            return;
+        }
+
+        this.count = this.countChars(this.input);
+    }
+
+    private countChars(input:string): number {
+        const counted: number = input.length;
+        return counted;
+    }
+}

src/tools/toolComponents.ts

@@ -23,6 +23,7 @@ import './components/cubic-bezier/CubicBezier';
 import './components/data-format-convertor/DataFormatConvertor';
 import './components/datetime-convertor/DatetimeConvertor';
 import './components/data-unit-convertor/DataUnitConvertor';
+import './components/character-counter/CharacterCounter';
 import './components/diff-checker/DiffChecker';
 import './components/escape-html-entities/EscapeHtmlEntities';
 import './components/gradient-maker/GradientMaker';

website/src/components/landing/tool-showcase.tsx

@@ -74,6 +74,7 @@ const TOOLS: Tool[] = [
   { name: 'QR Code', category: 'utility', icon: QrCode },
   { name: 'HTTP Status', category: 'utility', icon: Server },
   { name: 'Data Unit', category: 'utility', icon: Save },
+  { name: 'Char Count', category: 'utility', icon: RectangleEllipsis },
   { name: 'Path Convertor', category: 'utility', icon: FolderPen },
   { name: 'Number Base', category: 'utility', icon: Binary },
   { name: 'Token Generator', category: 'crypto', icon: Tag },