AverageMarcus/buzzers
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Import of glitchdotcom/hello-express

Browse Source
This commit is contained in:
Glitch (hello-express) 2020-02-19 22:18:49 +00:00
parent ca6674f38e
commit e78428c94d
7 changed files with 130 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
README.md
View File

@ -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゜)ノ
( ᵔ ᴥ ᵔ )

2
package.json
View File

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

42
public/client.js
View File

@ -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();
};

41
public/script.js Normal file
View File

@ -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();
});
});

65
public/style.css
View File

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

26
server.js
View File

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

47
views/index.html
View File

@ -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>