diff --git a/static/index.html b/static/index.html
index 628fe08..060151b 100644
--- a/static/index.html
+++ b/static/index.html
@@ -1,6 +1,19 @@
+ Tasks
+
+
+
-
-
-
diff --git a/static/main.js b/static/main.js
index 03fdd8b..4f9b965 100644
--- a/static/main.js
+++ b/static/main.js
@@ -1,5 +1,36 @@
"use strict";
-function main() {
+async function main() {
console.log("Hello, world!");
+ const root = new ElemWrapper(document.body);
+ const tabGroup = root.add("sl-tab-group");
+ tabGroup
+ .add("sl-tab", "slot", "nav", "panel", "tasks", "active", "")
+ .add("sl-icon", "name", "slash-circle", "style", "font-size: 20px");
+ tabGroup
+ .add("sl-tab", "slot", "nav", "panel", "tags")
+ .add("sl-icon", "name", "tags", "style", "font-size: 20px");
+}
+function add(name, parent, ...attrs) {
+ const elem = document.createElement(name);
+ parent.appendChild(elem);
+ for (let i = 0; i < attrs.length; i += 2) {
+ elem.setAttribute(attrs[i], attrs[i + 1]);
+ }
+ return elem;
+}
+class ElemWrapper {
+ elem;
+ constructor(elem) {
+ this.elem = elem;
+ this.elem = elem;
+ }
+ add(name, ...attrs) {
+ const elem = document.createElement(name);
+ this.elem.appendChild(elem);
+ for (let i = 0; i < attrs.length; i += 2) {
+ elem.setAttribute(attrs[i], attrs[i + 1]);
+ }
+ return new ElemWrapper(elem);
+ }
}
document.addEventListener("DOMContentLoaded", main);
diff --git a/ts/main.ts b/ts/main.ts
index 3cb9ace..1dbfcc9 100644
--- a/ts/main.ts
+++ b/ts/main.ts
@@ -1,5 +1,45 @@
-function main() {
+async function main() {
console.log("Hello, world!");
+
+ const root = new ElemWrapper(document.body);
+
+ const tabGroup = root.add("sl-tab-group");
+
+ tabGroup
+ .add("sl-tab", "slot", "nav", "panel", "tasks", "active", "")
+ .add("sl-icon", "name", "slash-circle", "style", "font-size: 20px");
+
+ tabGroup
+ .add("sl-tab", "slot", "nav", "panel", "tags")
+ .add("sl-icon", "name", "tags", "style", "font-size: 20px");
+}
+
+function add(name: string, parent: HTMLElement, ...attrs: any[]) {
+ const elem = document.createElement(name);
+ parent.appendChild(elem);
+
+ for (let i = 0; i < attrs.length; i += 2) {
+ elem.setAttribute(attrs[i], attrs[i + 1]);
+ }
+
+ return elem;
+}
+
+class ElemWrapper {
+ constructor(private elem: HTMLElement) {
+ this.elem = elem;
+ }
+
+ add(name: string, ...attrs: string[]): ElemWrapper {
+ const elem = document.createElement(name);
+ this.elem.appendChild(elem);
+
+ for (let i = 0; i < attrs.length; i += 2) {
+ elem.setAttribute(attrs[i], attrs[i + 1]);
+ }
+
+ return new ElemWrapper(elem);
+ }
}
document.addEventListener("DOMContentLoaded", main);