Initial Commit
This commit is contained in:
Glitch (axiomatic-parade)
commit
a0bca7ba51
3
.glitch-assets
Normal file
3
.glitch-assets
Normal 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
27
README.md
Normal 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
28
package.json
Normal 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
26
public/client.js
Normal 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
82
public/style.css
Normal 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
39
server.js
Normal 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
54
views/index.html
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user