interaapps
diff --git a/‎README.md
Lines changed: 49 additions & 1 deletion b/‎README.md
Lines changed: 49 additions & 1 deletion
diff --git a/‎dist/jdom.js
Lines changed: 1 addition & 1 deletion b/‎dist/jdom.js
Lines changed: 1 addition & 1 deletion
diff --git a/‎example.html
Lines changed: 0 additions & 244 deletions b/‎example.html
Lines changed: 0 additions & 244 deletions
diff --git a/‎examples/dom-manipulation/index.html
Lines changed: 57 additions & 0 deletions b/‎examples/dom-manipulation/index.html
Lines changed: 57 additions & 0 deletions
@@ -7,7 +7,8 @@
   - [Create Element](#create-element)
   - [Animator](#animator)
 - [Web-Components](#web-components)
-
+- [Typescript Component](#typescript-class-component)
+- [Typescript Component](#javascript-class-component)
 
 - [JDOM-Template](#jdom-template) Create Projects with JS-Template Strings with reactivity
   - [Reactivity](#reactivity)
@@ -130,6 +131,53 @@ $r('my-component', MyComponent)
 </script>
 ```
 
+# Typescript Class-Component
+
+```ts
+import { html, JDOMComponent } from 'jdomjs' 
+import { CustomElement, State } from "jdomjs/decorator.ts";
+
+@CustomElement('example-component')
+class ExampleComponent extends JDOMComponent {
+    @State()
+    private name: Hook<String> = 'John'
+  
+    @Computed(s => [s.name])
+    private greetings() {
+        return comp`Hello ${this.name}`
+    }
+  
+    render() {
+          return html`
+            <input :bind=${this.name}>
+            <h1>${this.greetings}</h1>
+          `
+    }
+}
+```
+
+# Javascript Class-Component
+```ts
+import { html, JDOMComponent, $r } from 'jdomjs'
+
+class ExampleComponent extends JDOMComponent {
+    private name = new Hook('John')
+  
+    private greetings() {
+        return comp`Hello ${this.name}`
+    }
+  
+    render() {
+          return html`
+            <input :bind=${this.name}>
+            <h1>${this.greetings()}</h1>
+          `
+    }
+}
+
+$r('example-component', ExampleComponent)
+```
+
 # JDOM-Template
 ```js
 import { html } from 'jdomjs'
 
@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+</head>
+<body>
+
+    <div id="todo-app">
+        <input type="text" id="new-task" placeholder="Add a new task and press Enter"/>
+        <button id="add-task">Add Task</button>
+        <ul id="tasks-list"></ul>
+    </div>
+
+    <script type="module">
+        import { $, $n, html } from '../../index.js';
+
+        // Function to create a new task item
+        function createTask(text) {
+            const li = $n('li').text(text);
+
+            const button = $n('button')
+                .text('Remove')
+                .click(() => li.remove());
+
+            li.append(button);
+
+            return li;
+        }
+
+        // Adding a task
+        function addTask() {
+            const input = $('#new-task');
+            const taskText = input.val().trim();
+
+            if (taskText) {
+                const tasksList = $('#tasks-list');
+                tasksList.append(
+                    createTask(taskText)
+                );
+
+                input.val(''); // Clear input after adding
+            }
+        }
+
+        // Binding actions
+        $('#add-task').click(addTask);
+        $('#new-task').on('keypress', (e) => {
+            if (e.key === 'Enter') addTask();
+        });
+    </script>
+
+</body>
+</html>