Updating app files

tarsislimadev · Jun 4, 2024 · d38dace · d38dace
1 parent d18acb4
commit d38dace
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -21,46 +21,8 @@ mv node_modules libs
 
 ## how to use
 
-```html
-<!-- index.html -->
-
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Front-end</title>
-  <script type="importmap">
-    {
-      "imports": {
-        "@brtmvdl/frontend": "https://cdn.jsdelivr.net/npm/@brtmvdl/[email protected]/src/index.js"
-      }
-    }
-  </script>
-</head>
-
-<body>
-  <div id="app"></div>
-  <script type="module" src="./index.js"></script>
-</body>
-</html>
-```
-
-```js
-// index.js
-
-import { HTML, nInput, nButton } from '@brtmvdl/frontend'
-
-const app = HTML.fromId('app')
-
-const input = new nInput()
-input.setPlaceholder('input')
-app.append(input)
-
-const button = new nButton()
-button.setText('button')
-button.on('click', () => window.alert(`value: ${input.getValue()}`))
-app.append(button)
-```
+[Example 01](./exaples/example-01.md)
+[Example 02](./exaples/example-02.md)
 
 ## license
 

diff --git a/exaples/example-01.md b/exaples/example-01.md
@@ -0,0 +1,41 @@
+
+```html
+<!-- index.html -->
+
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Front-end</title>
+  <script type="importmap">
+    {
+      "imports": {
+        "@brtmvdl/frontend": "https://cdn.jsdelivr.net/npm/@brtmvdl/[email protected]/src/index.js"
+      }
+    }
+  </script>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="./index.js"></script>
+</body>
+</html>
+```
+
+```js
+// index.js
+
+import { HTML, nInput, nButton } from '@brtmvdl/frontend'
+
+const app = HTML.fromId('app')
+
+const input = new nInput()
+input.setPlaceholder('input')
+app.append(input)
+
+const button = new nButton()
+button.setText('button')
+button.on('click', () => window.alert(`value: ${input.getValue()}`))
+app.append(button)
+```
diff --git a/exaples/example-02.md b/exaples/example-02.md
@@ -0,0 +1,41 @@
+
+```html
+<!-- index.html -->
+
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>brtmvdl</title>
+  <script type="importmap">
+    {
+      "imports": {
+        "@brtmvdl/frontend": "https://cdn.jsdelivr.net/npm/@brtmvdl/[email protected]/src/index.js"
+      }
+    }
+  </script>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module">
+    import { HTML } from '@brtmvdl/frontend'
+    import { Page } from './index.js'
+    HTML.fromElement(document.body).setStyle('margin', '0')
+    HTML.fromId('app').append(new Page())
+  </script>
+</body>
+</html>
+```
+
+```js
+// index.js
+
+import { HTML } from '@brtmvdl/frontend'
+
+export class Page extends HTML {
+  onCreate() {
+    super.onCreate()
+    this.setText('page')
+  }
+}
+```