Initial Commit
This commit is contained in:
Glitch (axiomatic-parade)
commit
a0bca7ba51
|
|
@ -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"}
|
||||
|
|
@ -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゜)ノ
|
||||
|
|
@ -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"
|
||||
]
|
||||
}
|
||||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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);
|
||||
});
|
||||
|
|
@ -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