diff --git a/forum-network/src/classes/display/document.js b/forum-network/src/classes/display/document.js index 87c6bbf..69545be 100644 --- a/forum-network/src/classes/display/document.js +++ b/forum-network/src/classes/display/document.js @@ -1,6 +1,13 @@ import { Box } from './box.js'; import { Form } from './form.js'; +export class Remark extends Box { + constructor(doc, text, opts) { + super('Remark', doc.el, opts); + this.setInnerHTML(text); + } +} + /** * @example * ```typescript @@ -13,8 +20,8 @@ export class Document extends Box { return this.addElement(new Form(this)); } - remarks(text, opts) { - return this.addElement(new Box('Remark', this.el, opts).setInnerHTML(text)); + remark(text, opts) { + return this.addElement(new Remark(this, text, opts)); } addElement(element) { diff --git a/forum-network/src/classes/display/form.js b/forum-network/src/classes/display/form.js index 80b6cb2..a818f11 100644 --- a/forum-network/src/classes/display/form.js +++ b/forum-network/src/classes/display/form.js @@ -22,12 +22,15 @@ export class Button extends FormElement { } export class TextField extends FormElement { constructor(name, parentEl, opts) { super(name, parentEl, opts); + this.label = document.createElement('label'); + this.label.innerHTML = name; this.input = document.createElement('input'); - this.el.appendChild(this.input); + this.label.appendChild(this.input); + this.el.appendChild(this.label); } get value() { - return this.input?.value; + return this.input?.value || null; } } diff --git a/forum-network/src/index.css b/forum-network/src/index.css index 1ff9007..237a290 100644 --- a/forum-network/src/index.css +++ b/forum-network/src/index.css @@ -71,3 +71,12 @@ button:disabled { background-color: #2a535e; color: #919191; } +label > input { + margin-left: 1em; +} +label { + font-family: monospace; + font-weight: bold; + font-size: smaller; + color: #999999; +} diff --git a/forum-network/src/tests/scripts/input.test.js b/forum-network/src/tests/scripts/input.test.js index 46e286d..c9bab13 100644 --- a/forum-network/src/tests/scripts/input.test.js +++ b/forum-network/src/tests/scripts/input.test.js @@ -11,7 +11,7 @@ scene.withDocument(); describe('Document', () => { it('Exists', () => { - scene.withDocument('Document', (doc) => doc.remarks('Hello')); + scene.withDocument('Document', (doc) => doc.remark('Hello')); }); describe('Input', () => { @@ -27,7 +27,7 @@ describe('Document', () => { }; form1.textField({ id: 'input1', name: 'Input 1', cb: updateFieldValueDisplay }); - doc.remarks('Hmm...!'); + doc.remark('Hmm...!'); }); }); });