Skip to content

Jabis Sevón / gun-multiserver

Go to a project
Toggle navigation
Toggle navigation pinning
e78428c9 by Glitch (hello-express)
Options

Import of glitchdotcom/hello-express

1 parent ca6674f3
Inline Side-by-side
Showing 7 changed files with 119 additions and 127 deletions
README.md
1 Welcome to Glitch 1 # hello-express
2 =================
3 2
4 Click `Show` in the header to see your app live. Updates to your code will instantly deploy and update live. 3 A server that serves a webpage, its resources, and some data
5 4
6 **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.
7
8 Find out more [about Glitch](https://glitch.com/about).
9 5
10 6 ## Your Project
11 Your Project
12 ------------
13 7
14 On the front-end, 8 On the front-end,
15 - edit `public/client.js`, `public/style.css` and `views/index.html` 9
16 - drag in `assets`, like images or music, to add them to your project 10 - Edit `views/index.html` to change the content of the webpage
11 - `public/client.js` is the javacript that runs when you load the webpage
12 - `public/style.css` is the styles for `views/index.html`
13 - Drag in `assets`, like images or music, to add them to your project
17 14
18 On the back-end, 15 On the back-end,
16
19 - your app starts at `server.js` 17 - your app starts at `server.js`
20 - add frameworks and packages in `package.json` 18 - add frameworks and packages in `package.json`
21 - safely store app secrets in `.env` (nobody can see this but you and people you invite) 19 - safely store app secrets in `.env` (nobody can see this but you and people you invite)
22 20
21 Click `Show` in the header to see your app live. Updates to your code will instantly deploy.
23 22
24 Made by [Glitch](https://glitch.com/)
25 -------------------
26 23
27 \ ゜o゜)ノ 24 ## Made by [Glitch](https://glitch.com/)
25
26 **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.
27
28 Find out more [about Glitch](https://glitch.com/about).
29
30 ( ᵔ ᴥ ᵔ )
...\ No newline at end of file ...\ No newline at end of file
......
package.json
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
13 "express": "^4.17.1" 13 "express": "^4.17.1"
14 }, 14 },
15 "engines": { 15 "engines": {
16 "node": "10.x" 16 "node": "12.x"
17 }, 17 },
18 "repository": { 18 "repository": {
19 "url": "https://glitch.com/edit/#!/hello-express" 19 "url": "https://glitch.com/edit/#!/hello-express"
......
public/client.js deleted 100644 → 0
1 // client-side js
2 // run by the browser each time your view template is loaded
3
4 console.log("hello world :o");
5
6 // our default array of dreams
7 const dreams = [
8 "Find and count some sheep",
9 "Climb a really tall mountain",
10 "Wash the dishes"
11 ];
12
13 // define variables that reference elements on our page
14 const dreamsList = document.getElementById("dreams");
15 const dreamsForm = document.forms[0];
16 const dreamInput = dreamsForm.elements["dream"];
17
18 // a helper function that creates a list item for a given dream
19 const appendNewDream = function(dream) {
20 const newListItem = document.createElement("li");
21 newListItem.innerHTML = dream;
22 dreamsList.appendChild(newListItem);
23 };
24
25 // iterate through every dream and add it to our page
26 dreams.forEach(function(dream) {
27 appendNewDream(dream);
28 });
29
30 // listen for the form to be submitted and add a new dream when it is
31 dreamsForm.onsubmit = function(event) {
32 // stop our form submission from refreshing the page
33 event.preventDefault();
34
35 // get dream value and add it to the list
36 dreams.push(dreamInput.value);
37 appendNewDream(dreamInput.value);
38
39 // reset form
40 dreamInput.value = "";
41 dreamInput.focus();
42 };
public/script.js 0 → 100644
1 // client-side js, loaded by index.html
2 // run by the browser each time the page is loaded
3
4 console.log("hello world :o");
5
6 // define variables that reference elements on our page
7 const dreamsList = document.getElementById("dreams");
8 const dreamsForm = document.querySelector("form");
9
10 // a helper function that creates a list item for a given dream
11 function appendNewDream(dream) {
12 const newListItem = document.createElement("li");
13 newListItem.innerText = dream;
14 dreamsList.appendChild(newListItem);
15 }
16
17 // fetch the initial list of dreams
18 fetch("/dreams")
19 .then(response => response.json()) // parse the JSON from the server
20 .then(dreams => {
21 // remove the loading text
22 dreamsList.firstElementChild.remove();
23
24 // iterate through every dream and add it to our page
25 dreams.forEach(appendNewDream);
26
27 // listen for the form to be submitted and add a new dream when it is
28 dreamsForm.addEventListener("submit", event => {
29 // stop our form submission from refreshing the page
30 event.preventDefault();
31
32 // get dream value and add it to the list
33 let newDream = dreamsForm.elements.dream.value;
34 dreams.push(newDream);
35 appendNewDream(newDream);
36
37 // reset form
38 dreamsForm.reset();
39 dreamsForm.elements.dream.focus();
40 });
41 });
public/style.css
1 /* styles */ 1 /* this file is loaded by index.html and styles the page */
2 /* called by your view template */
3 2
4 * { 3 * {
5 box-sizing: border-box; 4 box-sizing: border-box;
6 } 5 }
7 6
8 body { 7 body {
9 font-family: helvetica, arial, sans-serif; 8 font-family: sans-serif;
10 margin: 2em; 9 margin: 2em 1em;
10 line-height: 1.5em;
11 } 11 }
12 12
13 h1 { 13 h1 {
14 font-style: italic; 14 font-style: italic;
15 color: #373fff; 15 color: #373fff;
16 } 16 max-width: calc(100% - 5rem);
17 17 line-height: 1.1;
18 .bold {
19 font-weight: bold;
20 }
21
22 p {
23 max-width: 600px;
24 } 18 }
25 19
26 form { 20 form {
27 margin-bottom: 25px; 21 background-color: #eee;
28 padding: 15px; 22 display: grid;
29 background-color: cyan; 23 grid-gap: 1em;
30 display: inline-block; 24 padding: 1em;
31 width: 100%; 25 max-width: 40ch;
32 max-width: 340px;
33 border-radius: 3px;
34 } 26 }
35 27
36 input { 28 input {
29 border: 1px solid silver;
37 display: block; 30 display: block;
31 font-size: 16px;
38 margin-bottom: 10px; 32 margin-bottom: 10px;
39 padding: 5px; 33 padding: 5px;
40 width: 100%; 34 width: 100%;
41 border: 1px solid lightgrey;
42 border-radius: 3px;
43 font-size: 16px;
44 } 35 }
45 36
46 button { 37 form button {
47 font-size: 16px; 38 background-color: #bbbbf2;
48 border-radius: 3px; 39 border: 2px solid currentColor;
49 background-color: lightgrey; 40 border-radius: .25em;
50 border: 1px solid grey;
51 box-shadow: 2px 2px teal;
52 cursor: pointer; 41 cursor: pointer;
42 font-size: inherit;
43 line-height: 1.4em;
44 padding: 0.25em 1em;
45 max-width: 20ch;
53 } 46 }
54 47
55 button:hover { 48 form button:hover {
56 background-color: yellow; 49 background-color: lavender;
57 }
58
59 button:active {
60 box-shadow: none;
61 }
62
63 li {
64 margin-bottom: 5px;
65 } 50 }
66 51
67 footer { 52 footer {
68 margin-top: 50px; 53 margin-top: 3em;
69 padding-top: 25px; 54 padding-top: 1.5em;
70 border-top: 1px solid lightgrey; 55 border-top: 1px solid lightgrey;
71 } 56 }
......
server.js
1 // server.js 1 // server.js
2 // where your node app starts 2 // where your node app starts
3 3
4 // init project 4 // we've started you off with Express (https://expressjs.com/)
5 // but feel free to use whatever libraries or frameworks you'd like through `package.json`.
5 const express = require("express"); 6 const express = require("express");
6 const app = express(); 7 const app = express();
7 8
8 // we've started you off with Express, 9 // our default array of dreams
9 // but feel free to use whatever libs or frameworks you'd like through `package.json`. 10 const dreams = [
11 "Find and count some sheep",
12 "Climb a really tall mountain",
13 "Wash the dishes"
14 ];
10 15
11 // http://expressjs.com/en/starter/static-files.html 16 // make all the files in 'public' available
17 // https://expressjs.com/en/starter/static-files.html
12 app.use(express.static("public")); 18 app.use(express.static("public"));
13 19
14 // http://expressjs.com/en/starter/basic-routing.html 20 // https://expressjs.com/en/starter/basic-routing.html
15 app.get("/", function(request, response) { 21 app.get("/", (request, response) => {
16 response.sendFile(__dirname + "/views/index.html"); 22 response.sendFile(__dirname + "/views/index.html");
17 }); 23 });
18 24
25 // send the default array of dreams to the webpage
26 app.get("/dreams", (request, response) => {
27 // express helps us take JS objects and send them as JSON
28 response.json(dreams);
29 });
30
19 // listen for requests :) 31 // listen for requests :)
20 const listener = app.listen(process.env.PORT, function() { 32 const listener = app.listen(process.env.PORT, () => {
21 console.log("Your app is listening on port " + listener.address().port); 33 console.log("Your app is listening on port " + listener.address().port);
22 }); 34 });
......
views/index.html
1 <!-- This is a static file --> 1 <!-- This is a static file -->
2 <!-- served from your routes in server.js --> 2 <!-- served from your routes in server.js -->
3
4 <!-- You might want to try something fancier: -->
5 <!-- html/nunjucks docs: https://mozilla.github.io/nunjucks/ -->
6 <!-- pug: https://pugjs.org/ -->
7 <!-- haml: http://haml.info/ -->
8 <!-- hbs(handlebars): http://handlebarsjs.com/ -->
9
10 <!DOCTYPE html> 3 <!DOCTYPE html>
11 <html lang="en"> 4 <html lang="en">
12 <head> 5 <head>
13 <title>Welcome to Glitch!</title>
14 <meta name="description" content="A cool thing made with Glitch">
15 <link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
16 <meta charset="utf-8"> 6 <meta charset="utf-8">
7 <title>Welcome to Glitch!</title>
17 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge">
18 <meta name="viewport" content="width=device-width, initial-scale=1"> 9 <meta name="viewport" content="width=device-width, initial-scale=1">
10 <meta name="description" content="A cool thing made with Glitch">
11 <link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
19 12
20 <!-- import the webpage's stylesheet --> 13 <!-- import the webpage's stylesheet -->
21 <link rel="stylesheet" href="/style.css"> 14 <link rel="stylesheet" href="/style.css">
22 15
23 <!-- import the webpage's client-side javascript file --> 16 <!-- import the webpage's client-side javascript file -->
24 <script src="/client.js" defer></script> 17 <script src="/script.js" defer></script>
25 </head> 18 </head>
26 <body> 19 <body>
27 <header> 20 <header>
28 <h1> 21 <h1>A Dream of the Future</h1>
29 A Dream of the Future
30 </h1>
31 </header> 22 </header>
32 23
33 <main> 24 <main>
34 <p class="bold">Oh hi,</p> 25 <h2>Oh hi,</h2>
35 26
36 <p>Tell me your hopes and dreams:</p> 27 <p>Tell me your hopes and dreams:</p>
37 28
38 <form> 29 <form>
39 <input name="dream" type="text" maxlength="100" placeholder="Dreams!" aria-labelledby="submit-dream"> 30 <label>
40 <button type="submit" id="submit-dream">Submit Dream</button> 31 New Dream
32 <input name="dream" type="text" maxlength="100" required placeholder="Dreams!">
33 </label>
34 <button type="submit" id="submit-dream">Add Dream</button>
41 </form> 35 </form>
42 36
43 <section class="dreams"> 37 <section class="dreams">
44 <ul id="dreams"></ul> 38 <ul id="dreams">
39 <em>loading dreams&hellip;</em>
40 </ul>
45 </section> 41 </section>
46 </main> 42 </main>
47 43
48 <footer> 44 <footer>Made with <a href="https://glitch.com">Glitch</a>!</footer>
49 Made with <a href="https://glitch.com">Glitch</a>!
50 </footer>
51 45
52 <!-- include the Glitch button to show what the webpage is about and 46 <!-- include the Glitch button to show what the webpage is about and
53 to make it easier for folks to view source and remix --> 47 to make it easier for folks to view source and remix -->
54 <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div> 48 <div class="glitchButton" style="position:fixed;top:2em;right:20px;"></div>
55 <script src="https://button.glitch.me/button.js"></script> 49 <script src="https://button.glitch.me/button.js"></script>
56
57 </body> 50 </body>
58 </html> 51 </html>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!