Add the top level readme and the first 001_web_components_hello_world experiment

j5ndev · j5ndev · commit df7b5d29f822 · 2024-08-12T09:02:59.000-04:00
diff --git a/README.md b/README.md
@@ -0,0 +1,12 @@
+# Web Lab
+
+A scratch workspace for conducting experiments with HTML, CSS and JavaScript that are loaded by a web browser.
+
+## Exercises
+
+New expermiments are added as a subfolder to the `exercises` folder.
+
+Each experiment folder are prefixed with a three digit, zero padded number to perserve the order in which they were added.
+
+This format was inspired by the [ziglings](https://codeberg.org/ziglings/exercises) project, which in turn was inspired by the [rustlings](https://github.com/rust-lang/rustlings) project.
+
diff --git a/exercises/001_web_components_hello_world/index.htm b/exercises/001_web_components_hello_world/index.htm
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Web Components - Hello World</title>
+  </head>
+  <body>
+    <article>
+      <h1>Web Components</h1>
+      <p>Below is a simple hello world web component &#128515;</p>
+
+      <hello-world></hello-world>
+
+      <script  type="text/javascript">
+        class HelloWorld extends HTMLParagraphElement {
+            constructor() {
+            super();
+            const shadow = this.attachShadow({ mode: "closed" });
+            const text = document.createElement("span");
+            text.textContent = 'Hello, world!';
+            shadow.appendChild(text);
+            }
+        }
+        customElements.define("hello-world", HelloWorld, { extends: "p" });
+      </script>
+
+    </article>
+  </body>
+</html>
diff --git a/exercises/README.md b/exercises/README.md
@@ -0,0 +1,8 @@
+# Web Components - Hello World
+
+A simple web component that writes `Hello, world!` on load.
+The example referenced was [here](https://jonathanmh.com/p/web-components-101-hello-world/).
+
+## How To Use It
+
+Open index.htm in a browser.
