From e78428c94d0927faf1129d18dffcb3db2c477266 Mon Sep 17 00:00:00 2001 From: "Glitch (hello-express)" Date: Wed, 19 Feb 2020 22:18:49 +0000 Subject: [PATCH] Import of glitchdotcom/hello-express --- README.md | 45 +++++++++++++++++---------------- package.json | 2 +- public/client.js | 42 ------------------------------- public/script.js | 41 ++++++++++++++++++++++++++++++ public/style.css | 65 +++++++++++++++++++----------------------------- server.js | 26 +++++++++++++------ views/index.html | 47 +++++++++++++++------------------- 7 files changed, 130 insertions(+), 138 deletions(-) delete mode 100644 public/client.js create mode 100644 public/script.js diff --git a/README.md b/README.md index cb1061b..887720b 100644 --- a/README.md +++ b/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 + + +## Your Project + +On the front-end, + +- 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/) **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 ------------- - -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 - -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) - - -Made by [Glitch](https://glitch.com/) -------------------- - -\ ゜o゜)ノ +( ᵔ ᴥ ᵔ ) \ No newline at end of file diff --git a/package.json b/package.json index a49bf4d..c412603 100644 --- a/package.json +++ b/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" diff --git a/public/client.js b/public/client.js deleted file mode 100644 index 3b00a1e..0000000 --- a/public/client.js +++ /dev/null @@ -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(); -}; diff --git a/public/script.js b/public/script.js new file mode 100644 index 0000000..9790ab6 --- /dev/null +++ b/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(); + }); + }); diff --git a/public/style.css b/public/style.css index 3641cab..ab2ab2b 100644 --- a/public/style.css +++ b/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; } diff --git a/server.js b/server.js index 55cac78..1df7216 100644 --- a/server.js +++ b/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); }); diff --git a/views/index.html b/views/index.html index 6489186..0353ef0 100644 --- a/views/index.html +++ b/views/index.html @@ -1,58 +1,51 @@ - - - - - - - - Welcome to Glitch! - - + Welcome to Glitch! + + - + - +
-

- A Dream of the Future -

+

A Dream of the Future

-

Oh hi,

- +

Oh hi,

+

Tell me your hopes and dreams:

- +
- - + +
- +
-
    +
      + loading dreams… +
    - + -
    +
    -