commit a0bca7ba519015d3f825ff5f9c4f4ecd4e2aa8cc Author: Glitch (axiomatic-parade) Date: Tue Mar 13 20:25:39 2018 +0000 Initial Commit diff --git a/.glitch-assets b/.glitch-assets new file mode 100644 index 0000000..89fbc11 --- /dev/null +++ b/.glitch-assets @@ -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"} diff --git a/README.md b/README.md new file mode 100644 index 0000000..fbfc217 --- /dev/null +++ b/README.md @@ -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゜)ノ diff --git a/package.json b/package.json new file mode 100644 index 0000000..8c46ac9 --- /dev/null +++ b/package.json @@ -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" + ] +} diff --git a/public/client.js b/public/client.js new file mode 100644 index 0000000..58c3e44 --- /dev/null +++ b/public/client.js @@ -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) { + $('

').text(dream).appendTo('ul#dreams'); + }); + }); + + $('form').submit(function(event) { + event.preventDefault(); + var dream = $('input').val(); + $.post('/dreams?' + $.param({dream: dream}), function() { + $('

').text(dream).appendTo('ul#dreams'); + $('input').val(''); + $('input').focus(); + }); + }); + +}); diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..3d88245 --- /dev/null +++ b/public/style.css @@ -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; +} diff --git a/server.js b/server.js new file mode 100644 index 0000000..1102f98 --- /dev/null +++ b/server.js @@ -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); +}); diff --git a/views/index.html b/views/index.html new file mode 100644 index 0000000..bbc29fa --- /dev/null +++ b/views/index.html @@ -0,0 +1,54 @@ + + + + + + + + + + + + + Welcome to Glitch! + + + + + + + + +

+ A Dream of the Future +

+ +

Oh hi,

Tell me your hopes and dreams:

+ +

+ + + + + + + + +