Import of glitchdotcom/hello-express

public/client.js

@@ -1,42 +0,0 @@
-// client-side js
-// run by the browser each time your view template is loaded
-
-console.log("hello world :o");
-
-// our default array of dreams
-const dreams = [
-  "Find and count some sheep",
-  "Climb a really tall mountain",
-  "Wash the dishes"
-];
-
-// define variables that reference elements on our page
-const dreamsList = document.getElementById("dreams");
-const dreamsForm = document.forms[0];
-const dreamInput = dreamsForm.elements["dream"];
-
-// a helper function that creates a list item for a given dream
-const appendNewDream = function(dream) {
-  const newListItem = document.createElement("li");
-  newListItem.innerHTML = dream;
-  dreamsList.appendChild(newListItem);
-};
-
-// iterate through every dream and add it to our page
-dreams.forEach(function(dream) {
-  appendNewDream(dream);
-});
-
-// listen for the form to be submitted and add a new dream when it is
-dreamsForm.onsubmit = function(event) {
-  // stop our form submission from refreshing the page
-  event.preventDefault();
-
-  // get dream value and add it to the list
-  dreams.push(dreamInput.value);
-  appendNewDream(dreamInput.value);
-
-  // reset form
-  dreamInput.value = "";
-  dreamInput.focus();
-};

public/script.js

@@ -0,0 +1,41 @@
+// client-side js, loaded by index.html
+// run by the browser each time the page is loaded
+
+console.log("hello world :o");
+
+// define variables that reference elements on our page
+const dreamsList = document.getElementById("dreams");
+const dreamsForm = document.querySelector("form");
+
+// a helper function that creates a list item for a given dream
+function appendNewDream(dream) {
+  const newListItem = document.createElement("li");
+  newListItem.innerText = dream;
+  dreamsList.appendChild(newListItem);
+}
+
+// fetch the initial list of dreams
+fetch("/dreams")
+  .then(response => response.json()) // parse the JSON from the server
+  .then(dreams => {
+    // remove the loading text
+    dreamsList.firstElementChild.remove();
+  
+    // iterate through every dream and add it to our page
+    dreams.forEach(appendNewDream);
+  
+    // listen for the form to be submitted and add a new dream when it is
+    dreamsForm.addEventListener("submit", event => {
+      // stop our form submission from refreshing the page
+      event.preventDefault();
+
+      // get dream value and add it to the list
+      let newDream = dreamsForm.elements.dream.value;
+      dreams.push(newDream);
+      appendNewDream(newDream);
+
+      // reset form
+      dreamsForm.reset();
+      dreamsForm.elements.dream.focus();
+    });
+  });

public/style.css

@@ -1,71 +1,56 @@
-/* styles */
-/* called by your view template */
+/* this file is loaded by index.html and styles the page */
 
 * {
   box-sizing: border-box;
 }
 
 body {
-  font-family: helvetica, arial, sans-serif;
-  margin: 2em;
+  font-family: sans-serif;
+  margin: 2em 1em;
+  line-height: 1.5em;
 }
 
 h1 {
   font-style: italic;
   color: #373fff;
-}
-
-.bold {
-  font-weight: bold;
-}
-
-p {
-  max-width: 600px;
+  max-width: calc(100% - 5rem);
+  line-height: 1.1;
 }
 
 form {
-  margin-bottom: 25px;
-  padding: 15px;
-  background-color: cyan;
-  display: inline-block;
-  width: 100%;
-  max-width: 340px;
-  border-radius: 3px;
+  background-color: #eee;
+  display: grid;
+  grid-gap: 1em;
+  padding: 1em;
+  max-width: 40ch;
 }
 
 input {
+  border: 1px solid silver;
   display: block;
+  font-size: 16px;
   margin-bottom: 10px;
   padding: 5px;
   width: 100%;
-  border: 1px solid lightgrey;
-  border-radius: 3px;
-  font-size: 16px;
 }
 
-button {
-  font-size: 16px;
-  border-radius: 3px;
-  background-color: lightgrey;
-  border: 1px solid grey;
-  box-shadow: 2px 2px teal;
+form button {
+  background-color: #bbbbf2;
+  border: 2px solid currentColor;
+  border-radius: .25em;
   cursor: pointer;
+  font-size: inherit;
+  line-height: 1.4em;
+  padding: 0.25em 1em;
+  max-width: 20ch;
 }
 
-button:hover {
-  background-color: yellow;
-}
-
-button:active {
-  box-shadow: none;
-}
-
-li {
-  margin-bottom: 5px;
+form button:hover {
+  background-color: lavender;
 }
 
 footer {
-  margin-top: 50px;
-  padding-top: 25px;
+  margin-top: 3em;
+  padding-top: 1.5em;
   border-top: 1px solid lightgrey;
 }