diff --git a/index.html b/index.html
index fe0d264..54ef1b7 100644
--- a/index.html
+++ b/index.html
@@ -1,17 +1,4 @@
-
-
-
-
- DEMO
-
-
-
-
-
-
-
\ No newline at end of file
+
+DEMO
+
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..10b399a
--- /dev/null
+++ b/index.js
@@ -0,0 +1,12 @@
+import { div, pre } from './main.js'
+
+const demo = div.w(128).h(64) //.onclick.stop('click')
+demo.textContent = 'Hello world'
+
+console.log('demo', demo)
+document.body.appendChild(demo)
+document.body.appendChild(div.w(128).h(64).text('Hello world'))
+
+fetch('./index.js').then(res => res.text()).then(text => {
+ document.body.appendChild(pre.text(text))
+})
diff --git a/main.js b/main.js
index 26bca04..cb9fb2f 100644
--- a/main.js
+++ b/main.js
@@ -1,11 +1,46 @@
-export class div {
- static w(width) {
- console.log(`Width: ${width}`)
+export class pre extends HTMLPreElement {
+ constructor() {
+ super()
+ }
+ static text(text) {
+ const pre = new this()
+ pre.textContent = text
+ return pre
+ }
+ w(width) {
+ this.style.width = `${width}px`
return this
}
+ h(height) {
+ this.style.height = `${height}px`
+ return this
+ }
+}
+export class div extends HTMLDivElement {
+ constructor({ width = 0, height = 0 }) {
+ super()
+ this.style.width = `${width}px`
+ this.style.height = `${height}px`
+ }
+
+ static w(width) {
+ return new this({ width })
+ }
static h(height) {
- console.log(`Height: ${height}`)
+ return new this({ height })
+ }
+
+ w(width) {
+ this.style.width = `${width}px`
+ return this
+ }
+ h(height) {
+ this.style.height = `${height}px`
+ return this
+ }
+ text(text) {
+ this.textContent = text
return this
}
@@ -40,10 +75,16 @@ export class div {
}
}
-export class button extends div { }
-export class span extends div { }
+customElements.define('my-div', div, { extends: 'div' })
+customElements.define('my-pre', pre, { extends: 'pre' })
-export class header extends div { }
-export class footer extends div { }
-export class main extends div { }
+//
+//export class button extends div { }
+//export class span extends div { }
+//
+//export class header extends div { }
+//export class footer extends div { }
+//export class main extends div { }
+//
+export default { div, pre }