Import of glitchdotcom/hello-express

README.md

@@ -1,27 +1,30 @@
-Welcome to Glitch
-=================
+# hello-express
 
-Click `Show` in the header to see your app live. Updates to your code will instantly deploy and update live.
+A server that serves a webpage, its resources, and some data
 
-**Glitch** is the friendly community where you'll build the app of your dreams. Glitch lets you instantly create, remix, edit, and host an app, bot or site, and you can invite collaborators or helpers to simultaneously edit code with you.
-
-Find out more [about Glitch](https://glitch.com/about).
 
-
-Your Project
-------------
+## Your Project
 
 On the front-end,
-- edit `public/client.js`, `public/style.css` and `views/index.html`
-- drag in `assets`, like images or music, to add them to your project
+
+- Edit `views/index.html` to change the content of the webpage
+- `public/client.js` is the javacript that runs when you load the webpage
+- `public/style.css` is the styles for `views/index.html`
+- Drag in `assets`, like images or music, to add them to your project
 
 On the back-end,
+
 - your app starts at `server.js`
 - add frameworks and packages in `package.json`
 - safely store app secrets in `.env` (nobody can see this but you and people you invite)
 
+Click `Show` in the header to see your app live. Updates to your code will instantly deploy.
 
-Made by [Glitch](https://glitch.com/)
--------------------
 
-\ ゜o゜)ノ
+## Made by [Glitch](https://glitch.com/)
+
+**Glitch** is the friendly community where you'll build the app of your dreams. Glitch lets you instantly create, remix, edit, and host an app, bot or site, and you can invite collaborators or helpers to simultaneously edit code with you.
+
+Find out more [about Glitch](https://glitch.com/about).
+
+( ᵔ ᴥ ᵔ )

package.json

@@ -13,7 +13,7 @@
     "express": "^4.17.1"
   },
   "engines": {
-    "node": "10.x"
+    "node": "12.x"
   },
   "repository": {
     "url": "https://glitch.com/edit/#!/hello-express"

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;
 }

server.js

@@ -1,22 +1,34 @@
 // server.js
 // where your node app starts
 
-// init project
+// we've started you off with Express (https://expressjs.com/)
+// but feel free to use whatever libraries or frameworks you'd like through `package.json`.
 const express = require("express");
 const app = express();
 
-// we've started you off with Express,
-// but feel free to use whatever libs or frameworks you'd like through `package.json`.
+// our default array of dreams
+const dreams = [
+  "Find and count some sheep",
+  "Climb a really tall mountain",
+  "Wash the dishes"
+];
 
-// http://expressjs.com/en/starter/static-files.html
+// make all the files in 'public' available
+// https://expressjs.com/en/starter/static-files.html
 app.use(express.static("public"));
 
-// http://expressjs.com/en/starter/basic-routing.html
-app.get("/", function(request, response) {
+// https://expressjs.com/en/starter/basic-routing.html
+app.get("/", (request, response) => {
   response.sendFile(__dirname + "/views/index.html");
 });
 
+// send the default array of dreams to the webpage
+app.get("/dreams", (request, response) => {
+  // express helps us take JS objects and send them as JSON
+  response.json(dreams);
+});
+
 // listen for requests :)
-const listener = app.listen(process.env.PORT, function() {
+const listener = app.listen(process.env.PORT, () => {
   console.log("Your app is listening on port " + listener.address().port);
 });

views/index.html

@@ -1,58 +1,51 @@
 <!-- This is a static file -->
 <!-- served from your routes in server.js -->
-
-<!-- You might want to try something fancier: -->
-<!-- html/nunjucks docs: https://mozilla.github.io/nunjucks/ -->
-<!-- pug: https://pugjs.org/ -->
-<!-- haml: http://haml.info/ -->
-<!-- hbs(handlebars): http://handlebarsjs.com/ -->
-
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>Welcome to Glitch!</title>
-    <meta name="description" content="A cool thing made with Glitch">
-    <link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
     <meta charset="utf-8">
+    <title>Welcome to Glitch!</title>
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="A cool thing made with Glitch">
+    <link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
 
     <!-- import the webpage's stylesheet -->
     <link rel="stylesheet" href="/style.css">
-    
+
     <!-- import the webpage's client-side javascript file -->
-    <script src="/client.js" defer></script>
+    <script src="/script.js" defer></script>
   </head>
   <body>
     <header>
-      <h1>
-        A Dream of the Future
-      </h1>
+      <h1>A Dream of the Future</h1>
     </header>
 
     <main>
-      <p class="bold">Oh hi,</p>
-      
+      <h2>Oh hi,</h2>
+
       <p>Tell me your hopes and dreams:</p>
-      
+
       <form>
-        <input name="dream" type="text" maxlength="100" placeholder="Dreams!" aria-labelledby="submit-dream">
-        <button type="submit" id="submit-dream">Submit Dream</button>
+        <label>
+          New Dream
+          <input name="dream" type="text" maxlength="100" required placeholder="Dreams!">
+        </label>
+        <button type="submit" id="submit-dream">Add Dream</button>
       </form>
-      
+
       <section class="dreams">
-        <ul id="dreams"></ul>
+        <ul id="dreams">
+          <em>loading dreams&hellip;</em>
+        </ul>
       </section>
     </main>
 
-    <footer>
-      Made with <a href="https://glitch.com">Glitch</a>!
-    </footer>
+    <footer>Made with <a href="https://glitch.com">Glitch</a>!</footer>
 
     <!-- include the Glitch button to show what the webpage is about and
           to make it easier for folks to view source and remix -->
-    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
+    <div class="glitchButton" style="position:fixed;top:2em;right:20px;"></div>
     <script src="https://button.glitch.me/button.js"></script>
-
   </body>
 </html>