Improve the top level readme and update 001_web_components_hello_world

j5ndev · j5ndev · commit e0a1935ad9c6 · 2024-08-12T09:21:53.000-04:00
diff --git a/README.md b/README.md
@@ -1,12 +1,11 @@
 # Web Lab
 
-A scratch workspace for conducting experiments with HTML, CSS and JavaScript that are loaded by a web browser.
+This project is a scratch workspace for conducting experiments with HTML, CSS and JavaScript that is 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.
+Each experiment folder is prefixed with a three digit, zero padded number to perserve a logical order to exploring the experiments.
 
 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/README.md b/exercises/001_web_components_hello_world/README.md
@@ -1,6 +1,6 @@
 # Web Components - Hello World
 
-A simple web component that writes `Hello, world!` on load.
+This experiment is a simple web component that writes `Hello, world!` on page load.
 The example referenced was [here](https://jonathanmh.com/p/web-components-101-hello-world/).
 
 ## How To Use It
diff --git a/exercises/001_web_components_hello_world/index.htm b/exercises/001_web_components_hello_world/index.htm
@@ -5,19 +5,19 @@
   </head>
   <body>
     <article>
-      <h1>Web Components</h1>
-      <p>Below is a simple hello world web component &#128515;</p>
+      <h1>Web Components - Hello World</h1>
+      <p>Below is a simple web component that displays a message on page load. &#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);
+                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" });
