input: display the new value on changes inside the example

Instead of printing the new value using console.log, display it as text
below the example.

1 files changed, 30 insertions, 15 deletions

diff --git a/input/example.ts b/input/example.ts
index 1ca5736..3855347 100644
--- a/input/example.ts
+++ b/input/example.ts
@@ -10,13 +10,15 @@ function exampleInputString() {
 	el_title.innerText = "Input string"
 	el_example.appendChild(el_title)
 
+	let el_out = document.createElement("span")
+
 	let opts: WuiInputStringOpts = {
 		id: "my_input_string",
 		label: "Input string with ID",
 		value: "Hello, input string",
 		hint: "The input ID is 'my_input_string'",
-		onChangeHandler: (new_value: string) => {
-			console.log("input string new value: ", new_value)
+		onChangeHandler: (v: string) => {
+			el_out.innerText = v
 		},
 	}
 	let el_input_string = new WuiInputString(opts)
@@ -27,8 +29,8 @@ function exampleInputString() {
 		value: "Hello, disabled input string",
 		is_disabled: true,
 		hint: "The input string is disabled",
-		onChangeHandler: (new_value: string) => {
-			console.log("input string new value: ", new_value)
+		onChangeHandler: (v: string) => {
+			el_out.innerText = v
 		},
 	}
 	el_input_string = new WuiInputString(opts)
@@ -37,13 +39,18 @@ function exampleInputString() {
 	opts = {
 		label: "Input string without hint",
 		value: "Hello, input string without hint",
-		onChangeHandler: (new_value: string) => {
-			console.log("input string without hint: new value: ", new_value)
+		onChangeHandler: (v: string) => {
+			el_out.innerText = v
 		},
 	}
 	el_input_string = new WuiInputString(opts)
 	el_example.appendChild(el_input_string.el)
 
+	let el_out_label = document.createElement("div")
+	el_out_label.innerText = "Input string changes to "
+	el_out_label.appendChild(el_out)
+	el_example.appendChild(el_out_label)
+
 	document.body.appendChild(el_example)
 }
 
@@ -54,11 +61,13 @@ function exampleInputNumber() {
 	el_title.innerText = "Input number"
 	el_example.appendChild(el_title)
 
+	let el_out = document.createElement("span")
+
 	let opts: WuiInputNumberOpts = {
 		label: "Input number",
-		value: 100,
+		value: 1,
 		onChangeHandler: (val: number) => {
-			console.log("number changes to", val)
+			el_out.innerText = ""+val
 		},
 	}
 	let input_num = new WuiInputNumber(opts)
@@ -67,10 +76,10 @@ function exampleInputNumber() {
 	opts = {
 		id: "my_input_number",
 		label: "Input number with ID",
-		value: 100,
+		value: 10,
 		hint: "The ID for this input is 'my_input_number'",
 		onChangeHandler: (val: number) => {
-			console.log("number changes to", val)
+			el_out.innerText = ""+val
 		},
 	}
 	input_num = new WuiInputNumber(opts)
@@ -78,11 +87,11 @@ function exampleInputNumber() {
 
 	opts = {
 		label: "Input number disabled",
-		value: 100,
+		value: 1000,
 		hint: "Input number with 'is_disabled' set to true",
 		is_disabled: true,
 		onChangeHandler: (val: number) => {
-			console.log("number changes to", val)
+			el_out.innerText = ""+val
 		},
 	}
 	input_num = new WuiInputNumber(opts)
@@ -90,10 +99,10 @@ function exampleInputNumber() {
 
 	opts = {
 		label: "Input number with hint",
-		value: 100,
+		value: 10000,
 		hint: "This is the <b>hint</b>",
 		onChangeHandler: (val: number) => {
-			console.log("number changes to", val)
+			el_out.innerText = ""+val
 		},
 	}
 	input_num = new WuiInputNumber(opts)
@@ -105,11 +114,17 @@ function exampleInputNumber() {
 		max: 12,
 		min: -20,
 		onChangeHandler: (val: number) => {
-			console.log("number changes to", val)
+			el_out.innerText = ""+val
 		},
 	}
 	input_num = new WuiInputNumber(opts)
 	el_example.appendChild(input_num.el)
+
+	let el_out_label = document.createElement("div")
+	el_out_label.innerText = "Input number changes to "
+	el_out_label.appendChild(el_out)
+	el_example.appendChild(el_out_label)
+
 	document.body.appendChild(el_example)
 }