Modernize

luiscastro193 · Oct 8, 2023 · 26323fa · 26323fa
1 parent d618eed
commit 26323fa
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 47 deletions.
diff --git a/framework.js b/framework.js
@@ -1,11 +1,16 @@
 "use strict";
-window.htmlToElement = function(html) {
+export async function request(resource, options) {
+	let response = await fetch(resource, options);
+	if (response.ok) return response; else throw response;
+}
+
+export function htmlToElement(html) {
 	let template = document.createElement('template');
 	template.innerHTML = html.trim();
 	return template.content.firstChild;
 }
 
-window.AuxEvent = class {
+export class AuxEvent {
 	constructor() {
 		this.event = document.createElement('e');
 		this.aux = new Event('e');
@@ -27,7 +32,7 @@ window.AuxEvent = class {
 	}
 }
 
-window.Observable = class {
+export class Observable {
 	constructor(initialValue) {
 		this.variable = initialValue;
 		this.event = new AuxEvent();

diff --git a/index.html b/index.html
@@ -1,47 +1,17 @@
 <!doctype html>
 <html>
-	<head>
-		<meta charset="utf-8">
-		<title>Data binding</title>
-		<meta name="author" content="Luis Castro Martín">
-		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<link rel="icon" href="https://luiscastro193.github.io/favicon.svg" type="image/svg+xml">
-		<script src="framework.js"></script>
-	</head>
-
-	<body>
-		<h3>Data binding</h3>
-		<input type="number" oninput="nInputs.value = this.value" onmouseenter="this.select()" min="1" value="3" >
-		<br><br>
-		<section id="inputs">
-		</section>
-		<script>
-			"use strict";
-			var nInputs = new Observable(document.querySelector("input").value);
-			var message = new Observable("Binded data");
-
-			function inputElement() {
-				let element = htmlToElement(`<article>
-					<input type="text" oninput="message.value = this.value" onmouseenter="this.focus()" style="max-width: 17cm; width: 100%" >
-					<br><br>
-				</article>`);
-				let input = element.querySelector('input');
-				input.value = message.value;
-				message.subscribe(input, () => input.value = message.value);
-				return element;
-			}
-
-			function inputsElement() {
-				let element = htmlToElement(`<section id="inputs"></section>`);
-
-				for (let i = 0; i < nInputs.value; i++)
-					element.appendChild(inputElement());
-
-				nInputs.subscribe(element, () => element.replaceWith(inputsElement()));
-				return element;
-			}
-
-			document.getElementById("inputs").replaceWith(inputsElement());
-		</script>
-	</body>
+<head>
+	<meta charset="utf-8">
+	<title>Data binding</title>
+	<meta name="author" content="Luis Castro Martín">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="icon" href="https://luiscastro193.github.io/favicon.svg" type="image/svg+xml">
+	<script src="main.js" type="module"></script>
+</head>
+<body>
+	<h3>Data binding</h3>
+	<input type="number" min="1" value="3" >
+	<br><br>
+	<section id="inputs"></section>
+</body>
 </html>
diff --git a/main.js b/main.js
@@ -0,0 +1,33 @@
+"use strict";
+import {htmlToElement, Observable} from "./framework.js";
+
+let mainInput = document.querySelector("input");
+let nInputs = new Observable(mainInput.value);
+let message = new Observable("Binded data");
+
+function inputElement() {
+	let element = htmlToElement(`<article>
+		<input type="text" style="max-width: 17cm; width: 100%" >
+		<br><br>
+	</article>`);
+	let input = element.querySelector('input');
+	input.value = message.value;
+	input.oninput = () => {message.value = input.value};
+	input.onmouseenter = () => input.focus();
+	message.subscribe(input, () => input.value = message.value);
+	return element;
+}
+
+function inputsElement() {
+	let element = htmlToElement(`<section id="inputs"></section>`);
+
+	for (let i = 0; i < nInputs.value; i++)
+		element.appendChild(inputElement());
+
+	nInputs.subscribe(element, () => element.replaceWith(inputsElement()));
+	return element;
+}
+
+mainInput.oninput = () => {nInputs.value = mainInput.value};
+mainInput.onmouseenter = () => mainInput.select();
+document.getElementById("inputs").replaceWith(inputsElement());