💼🎋 Checkpoint

./views/index.html:530995/821
./package.json:530995/1294
./server.js:530995/1216
./views/index.handlebars:530995/43
./public/script.js:530995/1310
./views/room.handlebars:530995/874
This commit is contained in:
Glitch (hello-express) 2020-04-09 10:19:11 +00:00
parent 80a5f2f8d0
commit c2acb83882
7 changed files with 245 additions and 94 deletions

View File

@ -10,7 +10,8 @@
"start": "node server.js" "start": "node server.js"
}, },
"dependencies": { "dependencies": {
"express": "^4.17.1" "express": "^4.17.1",
"express-handlebars": "^4.0.3"
}, },
"engines": { "engines": {
"node": "12.x" "node": "12.x"

View File

@ -1,41 +0,0 @@
// 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();
});
});

View File

@ -1,10 +1,18 @@
const express = require("express"); const express = require("express");
var exphbs = require('express-handlebars');
const app = express(); const app = express();
app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');
app.use(express.static("public")); app.use(express.static("public"));
app.get("/:roomId/join", (request, response) => { app.get("/:roomId/join", (request, response) => {
response.sendFile(__dirname + "/views/index.html"); response.render('join', {layout: false, room: request.params.roomId});
});
app.post("/:roomId/join", (request, response) => {
response.render('room', {layout: false, room: request.params.roomId});
}); });
const listener = app.listen(process.env.PORT, () => { const listener = app.listen(process.env.PORT, () => {

View File

@ -1,5 +1,6 @@
dependencies: dependencies:
express: 4.17.1 express: 4.17.1
express-handlebars: 4.0.3
packages: packages:
/accepts/1.3.7: /accepts/1.3.7:
dependencies: dependencies:
@ -14,6 +15,14 @@ packages:
dev: false dev: false
resolution: resolution:
integrity: sha1-ml9pkFGx5wczKPKgCJaLZOopVdI= integrity: sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
/asap/2.0.6:
dev: false
resolution:
integrity: sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
/balanced-match/1.0.0:
dev: false
resolution:
integrity: sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
/body-parser/1.19.0: /body-parser/1.19.0:
dependencies: dependencies:
bytes: 3.1.0 bytes: 3.1.0
@ -31,12 +40,28 @@ packages:
node: '>= 0.8' node: '>= 0.8'
resolution: resolution:
integrity: sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw== integrity: sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==
/brace-expansion/1.1.11:
dependencies:
balanced-match: 1.0.0
concat-map: 0.0.1
dev: false
resolution:
integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
/bytes/3.1.0: /bytes/3.1.0:
dev: false dev: false
engines: engines:
node: '>= 0.8' node: '>= 0.8'
resolution: resolution:
integrity: sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg== integrity: sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
/commander/2.20.3:
dev: false
optional: true
resolution:
integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
/concat-map/0.0.1:
dev: false
resolution:
integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
/content-disposition/0.5.3: /content-disposition/0.5.3:
dependencies: dependencies:
safe-buffer: 5.1.2 safe-buffer: 5.1.2
@ -67,6 +92,14 @@ packages:
dev: false dev: false
resolution: resolution:
integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA== integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
/define-properties/1.1.3:
dependencies:
object-keys: 1.1.1
dev: false
engines:
node: '>= 0.4'
resolution:
integrity: sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==
/depd/1.1.2: /depd/1.1.2:
dev: false dev: false
engines: engines:
@ -97,6 +130,18 @@ packages:
node: '>= 0.6' node: '>= 0.6'
resolution: resolution:
integrity: sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc= integrity: sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
/express-handlebars/4.0.3:
dependencies:
glob: 7.1.6
graceful-fs: 4.2.3
handlebars: 4.7.6
object.assign: 4.1.0
promise: 8.1.0
dev: false
engines:
node: '>=0.10'
resolution:
integrity: sha512-XSAQRreb0LzzSAQG7DRCaidqWYdtfOjgHF6VTaN7p6FaUVfFZq4Ki2d5q8WO3cdsEqbYBV69XzG+FRHzNukwiQ==
/express/4.17.1: /express/4.17.1:
dependencies: dependencies:
accepts: 1.3.7 accepts: 1.3.7
@ -160,6 +205,49 @@ packages:
node: '>= 0.6' node: '>= 0.6'
resolution: resolution:
integrity: sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac= integrity: sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
/fs.realpath/1.0.0:
dev: false
resolution:
integrity: sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
/function-bind/1.1.1:
dev: false
resolution:
integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
/glob/7.1.6:
dependencies:
fs.realpath: 1.0.0
inflight: 1.0.6
inherits: 2.0.4
minimatch: 3.0.4
once: 1.4.0
path-is-absolute: 1.0.1
dev: false
resolution:
integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
/graceful-fs/4.2.3:
dev: false
resolution:
integrity: sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==
/handlebars/4.7.6:
dependencies:
minimist: 1.2.5
neo-async: 2.6.1
source-map: 0.6.1
wordwrap: 1.0.0
dev: false
engines:
node: '>=0.4.7'
hasBin: true
optionalDependencies:
uglify-js: 3.8.1
resolution:
integrity: sha512-1f2BACcBfiwAfStCKZNrUCgqNZkGsAT7UM3kkYtXuLo0KnaVfjKOyf7PRzB6++aK9STyT1Pd2ZCPe3EGOXleXA==
/has-symbols/1.0.1:
dev: false
engines:
node: '>= 0.4'
resolution:
integrity: sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==
/http-errors/1.7.2: /http-errors/1.7.2:
dependencies: dependencies:
depd: 1.1.2 depd: 1.1.2
@ -192,6 +280,13 @@ packages:
node: '>=0.10.0' node: '>=0.10.0'
resolution: resolution:
integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA== integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
/inflight/1.0.6:
dependencies:
once: 1.4.0
wrappy: 1.0.2
dev: false
resolution:
integrity: sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
/inherits/2.0.3: /inherits/2.0.3:
dev: false dev: false
resolution: resolution:
@ -243,6 +338,16 @@ packages:
hasBin: true hasBin: true
resolution: resolution:
integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg== integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
/minimatch/3.0.4:
dependencies:
brace-expansion: 1.1.11
dev: false
resolution:
integrity: sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
/minimist/1.2.5:
dev: false
resolution:
integrity: sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
/ms/2.0.0: /ms/2.0.0:
dev: false dev: false
resolution: resolution:
@ -257,6 +362,27 @@ packages:
node: '>= 0.6' node: '>= 0.6'
resolution: resolution:
integrity: sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw== integrity: sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
/neo-async/2.6.1:
dev: false
resolution:
integrity: sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
/object-keys/1.1.1:
dev: false
engines:
node: '>= 0.4'
resolution:
integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
/object.assign/4.1.0:
dependencies:
define-properties: 1.1.3
function-bind: 1.1.1
has-symbols: 1.0.1
object-keys: 1.1.1
dev: false
engines:
node: '>= 0.4'
resolution:
integrity: sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==
/on-finished/2.3.0: /on-finished/2.3.0:
dependencies: dependencies:
ee-first: 1.1.1 ee-first: 1.1.1
@ -265,16 +391,34 @@ packages:
node: '>= 0.8' node: '>= 0.8'
resolution: resolution:
integrity: sha1-IPEzZIGwg811M3mSoWlxqi2QaUc= integrity: sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=
/once/1.4.0:
dependencies:
wrappy: 1.0.2
dev: false
resolution:
integrity: sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
/parseurl/1.3.3: /parseurl/1.3.3:
dev: false dev: false
engines: engines:
node: '>= 0.8' node: '>= 0.8'
resolution: resolution:
integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ== integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
/path-is-absolute/1.0.1:
dev: false
engines:
node: '>=0.10.0'
resolution:
integrity: sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
/path-to-regexp/0.1.7: /path-to-regexp/0.1.7:
dev: false dev: false
resolution: resolution:
integrity: sha1-32BBeABfUi8V60SQ5yR6G/qmf4w= integrity: sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
/promise/8.1.0:
dependencies:
asap: 2.0.6
dev: false
resolution:
integrity: sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q==
/proxy-addr/2.0.5: /proxy-addr/2.0.5:
dependencies: dependencies:
forwarded: 0.1.2 forwarded: 0.1.2
@ -350,6 +494,12 @@ packages:
dev: false dev: false
resolution: resolution:
integrity: sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw== integrity: sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
/source-map/0.6.1:
dev: false
engines:
node: '>=0.10.0'
resolution:
integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
/statuses/1.5.0: /statuses/1.5.0:
dev: false dev: false
engines: engines:
@ -371,6 +521,17 @@ packages:
node: '>= 0.6' node: '>= 0.6'
resolution: resolution:
integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g== integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
/uglify-js/3.8.1:
dependencies:
commander: 2.20.3
source-map: 0.6.1
dev: false
engines:
node: '>=0.8.0'
hasBin: true
optional: true
resolution:
integrity: sha512-W7KxyzeaQmZvUFbGj4+YFshhVrMBGSg2IbcYAjGWGvx8DHvJMclbTDMpffdxFUGPBHjIytk7KJUR/KUXstUGDw==
/unpipe/1.0.0: /unpipe/1.0.0:
dev: false dev: false
engines: engines:
@ -389,8 +550,17 @@ packages:
node: '>= 0.8' node: '>= 0.8'
resolution: resolution:
integrity: sha1-IpnwLG3tMNSllhsLn3RSShj2NPw= integrity: sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
/wordwrap/1.0.0:
dev: false
resolution:
integrity: sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
/wrappy/1.0.2:
dev: false
resolution:
integrity: sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
registry: 'https://registry.npmjs.org/' registry: 'https://registry.npmjs.org/'
shrinkwrapMinorVersion: 9 shrinkwrapMinorVersion: 9
shrinkwrapVersion: 3 shrinkwrapVersion: 3
specifiers: specifiers:
express: ^4.17.1 express: ^4.17.1
express-handlebars: ^4.0.3

View File

@ -1,51 +0,0 @@
<!-- This is a static file -->
<!-- served from your routes in server.js -->
<!DOCTYPE html>
<html lang="en">
<head>
<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="/script.js" defer></script>
</head>
<body>
<header>
<h1>A Dream of the Future</h1>
</header>
<main>
<h2>Oh hi,</h2>
<p>Tell me your hopes and dreams:</p>
<form>
<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">
<em>loading dreams&hellip;</em>
</ul>
</section>
</main>
<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:2em;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html>

32
views/join.handlebars Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Buzzer</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">
<link rel="stylesheet" href="/style.css">
<script src="/script.js" defer></script>
</head>
<body>
<header>
<h1>Join {{room}}</h1>
</header>
<main>
<h2>Oh hi,</h2>
<p>Tell me your (team) name:</p>
<form>
<label>
Name
<input name="name" type="text" maxlength="100" required>
</label>
<button type="submit" id="submit-name">Submit</button>
</form>
</main>
</body>
</html>

32
views/room.handlebars Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Buzzer</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">
<link rel="stylesheet" href="/style.css">
<script src="/script.js" defer></script>
</head>
<body>
<header>
<h1>Join {{room}}</h1>
</header>
<main>
<h2>Oh hi,</h2>
<p>Tell me your (team) name:</p>
<form>
<label>
Name
<input name="name" type="text" maxlength="100" required>
</label>
<button type="submit" id="submit-name">Submit</button>
</form>
</main>
</body>
</html>