Initial Commit

This commit is contained in:
Glitch (axiomatic-parade) 2018-03-13 20:25:39 +00:00
commit a0bca7ba51
7 changed files with 259 additions and 0 deletions

3
.glitch-assets Normal file
View File

@ -0,0 +1,3 @@
{"name":"drag-in-files.svg","date":"2016-10-22T16:17:49.954Z","url":"https://cdn.hyperdev.com/drag-in-files.svg","type":"image/svg","size":7646,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/drag-in-files.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(102, 153, 205)","uuid":"adSBq97hhhpFNUna"}
{"name":"click-me.svg","date":"2016-10-23T16:17:49.954Z","url":"https://cdn.hyperdev.com/click-me.svg","type":"image/svg","size":7116,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/click-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(243, 185, 186)","uuid":"adSBq97hhhpFNUnb"}
{"name":"paste-me.svg","date":"2016-10-24T16:17:49.954Z","url":"https://cdn.hyperdev.com/paste-me.svg","type":"image/svg","size":7242,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/paste-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(42, 179, 185)","uuid":"adSBq97hhhpFNUnc"}

27
README.md Normal file
View File

@ -0,0 +1,27 @@
Welcome to the Glitch BETA
==========================
Click `Show` in the header to see your app live. Updates to your code will instantly deploy and update live.
**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 [Fog Creek](https://fogcreek.com/)
-------------------
\ ゜o゜)

28
package.json Normal file
View File

@ -0,0 +1,28 @@
{
"//1": "describes your app and its dependencies",
"//2": "https://docs.npmjs.com/files/package.json",
"//3": "updating this file will download and update your packages",
"name": "my-glitch-app",
"version": "0.0.1",
"description": "What am I about?",
"main": "server.js",
"scripts": {
"start": "node server.js"
},
"dependencies": {
"express": "^4.16.2"
},
"engines": {
"node": "8.x"
},
"repository": {
"url": "https://glitch.com/edit/#!/welcome-project"
},
"license": "MIT",
"keywords": [
"node",
"glitch",
"express"
]
}

26
public/client.js Normal file
View File

@ -0,0 +1,26 @@
// client-side js
// run by the browser each time your view template is loaded
// by default, you've got jQuery,
// add other scripts at the bottom of index.html
$(function() {
console.log('hello world :o');
$.get('/dreams', function(dreams) {
dreams.forEach(function(dream) {
$('<li></li>').text(dream).appendTo('ul#dreams');
});
});
$('form').submit(function(event) {
event.preventDefault();
var dream = $('input').val();
$.post('/dreams?' + $.param({dream: dream}), function() {
$('<li></li>').text(dream).appendTo('ul#dreams');
$('input').val('');
$('input').focus();
});
});
});

82
public/style.css Normal file
View File

@ -0,0 +1,82 @@
/* styles */
/* called by your view template */
/* You might want to try something fancier: */
/* less: http://lesscss.org/ */
* {
box-sizing: border-box;
}
body {
font-family: helvetica, arial, sans-serif;
margin: 25px;
}
h1 {
font-weight: bold;
color: pink;
}
.bold {
font-weight: bold;
}
p {
max-width: 600px;
}
form {
margin-bottom: 25px;
padding: 15px;
background-color: cyan;
display: inline-block;
width: 100%;
max-width: 340px;
border-radius: 3px;
}
input {
display: block;
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;
cursor: pointer;
}
button:hover {
background-color: yellow;
}
button:active {
box-shadow: none;
}
li {
margin-bottom: 5px;
}
footer {
margin-top: 50px;
padding-top: 25px;
border-top: 1px solid lightgrey;
}
footer > a {
color: #BBBBBB;
}
.nicejob {
text-decoration: line-through;
}

39
server.js Normal file
View File

@ -0,0 +1,39 @@
// server.js
// where your node app starts
// init project
var express = require('express');
var app = express();
// we've started you off with Express,
// but feel free to use whatever libs or frameworks you'd like through `package.json`.
// http://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) {
response.sendFile(__dirname + '/views/index.html');
});
app.get("/dreams", function (request, response) {
response.send(dreams);
});
// could also use the POST body instead of query string: http://expressjs.com/en/api.html#req.body
app.post("/dreams", function (request, response) {
dreams.push(request.query.dream);
response.sendStatus(200);
});
// Simple in-memory store for now
var dreams = [
"Find and count some sheep",
"Climb a really tall mountain",
"Wash the dishes"
];
// listen for requests :)
var listener = app.listen(process.env.PORT, function () {
console.log('Your app is listening on port ' + listener.address().port);
});

54
views/index.html Normal file
View File

@ -0,0 +1,54 @@
<!-- 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>
<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">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<header>
<h1>
A Dream of the Future
</h1>
</header>
<main>
<p class="bold">Oh hi,</p>
<p>Tell me your hopes and dreams:</p>
<form>
<input type="text" maxlength="100" placeholder="Dreams!">
<button type="submit">Submit</button>
</form>
<section class="dreams">
<ul id="dreams">
</ul>
</section>
</main>
<footer>
<a href="https://glitch.com">
Remix this in Glitch
</a>
</footer>
<!-- Your web-app is https, so your scripts need to be too -->
<script src="https://code.jquery.com/jquery-2.2.1.min.js"
integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00="
crossorigin="anonymous"></script>
<script src="/client.js"></script>
</body>
</html>