From af51f4f8c7fea44bb8ce2349d31e18557a28d2bc Mon Sep 17 00:00:00 2001 From: "Glitch (a2-shortstack)" Date: Thu, 17 Sep 2020 01:01:59 +0000 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=8C=9C=F0=9F=8C=9C=20Updated=20with?= =?UTF-8?q?=20Glitch?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 + README.md | 97 ++++-------------------------- package.json | 12 ++-- public/css/style.css | 89 ++++++++++++++++++++++++++- public/index.html | 139 ++++++++++++++++++++++++++++++++++--------- public/js/scripts.js | 3 - server.improved.js | 45 ++++++++------ shrinkwrap.yaml | 15 +++++ 8 files changed, 260 insertions(+), 141 deletions(-) create mode 100644 shrinkwrap.yaml diff --git a/.gitignore b/.gitignore index 57195033..68770caf 100755 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ *.DS_Store node_modules/ package-lock.json +my_db/ diff --git a/README.md b/README.md index 3945c152..4eda6e69 100755 --- a/README.md +++ b/README.md @@ -1,93 +1,16 @@ -Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js -=== +https://glitch.com/~a2-shortstack +https://glitch.com/edit/#!/a2-shortstack?path=README.md%3A3%3A0 -Due: September 16th, by 11:59 PM. - -This assignment aims to introduce you to the concepts and practice involved in creating a prototype (i.e. not deployment ready) two-tiered web application. The baseline aims of this assignment involve creating an application that demonstrates the use of several specific pieces of HTML, CSS, JavaScript, and Node.js functionality. - -Baseline Requirements ---- - -Note that there is a very large range of application areas and possibilities that meet these baseline requirements. Make your application do something useful! A todo list, storing / retrieving high scores for a very simple game, have a little fun with it. - -Your application is required to implement the following functionalities: - -- a `Server` which not only serves files, but also maintains a tabular dataset with 3 or more fields related to your application -- a `Results` functionality which shows the entire dataset residing in the server's memory -- a `Form/Entry` functionality which allows a user to add, modify, or delete data items residing in the server's memory -- a `Server Logic` which, upon receiving new or modified "incoming" data, includes and uses a function that adds at least one additional derived field to this incoming data before integrating it with the existing dataset -- the `Derived field` for a new row of data must be computed based on fields already existing in the row. For example, a `todo` dataset with `task`, `priority`, and `creation_date` may generate a new field `deadline` by looking at `creation_date` and `priority` - -Your application is required to demonstrate the use of the following concepts: - -HTML: -- One or more [HTML Forms](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms), with any combination of form tags appropriate for the user input portion of the application -- A results page displaying all data currently available on the server. You will most likely use a `` tag for this, but `
+ + + + + + + + +
IDNameGame NameGame CostHours PlayedCost/h
+ + + + \ No newline at end of file diff --git a/public/js/scripts.js b/public/js/scripts.js index de052eae..e69de29b 100755 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -1,3 +0,0 @@ -// Add some Javascript code here, to run on the front end. - -console.log("Welcome to assignment 2!") \ No newline at end of file diff --git a/server.improved.js b/server.improved.js index 26673fc0..2dfd0195 100644 --- a/server.improved.js +++ b/server.improved.js @@ -1,3 +1,14 @@ +let PouchDb = require('pouchdb'); + +let db = new PouchDb('my_db'); + +var entry_id = 0 + +const statusCode = 200 +const errorCode = 404 + +const appdata = [] + const http = require( 'http' ), fs = require( 'fs' ), // IMPORTANT: you must run `npm install` in the directory for this assignment @@ -6,12 +17,6 @@ const http = require( 'http' ), dir = 'public/', port = 3000 -const appdata = [ - { 'model': 'toyota', 'year': 1999, 'mpg': 23 }, - { 'model': 'honda', 'year': 2004, 'mpg': 30 }, - { 'model': 'ford', 'year': 1987, 'mpg': 14} -] - const server = http.createServer( function( request,response ) { if( request.method === 'GET' ) { handleGet( request, response ) @@ -39,11 +44,20 @@ const handlePost = function( request, response ) { request.on( 'end', function() { console.log( JSON.parse( dataString ) ) - - // ... do something with the data here!!! - - response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) - response.end() + + // ... do something with the data here!!! + + + const json = JSON.parse(dataString) + entry_id++; + let entry = { id : entry_id } + + // parse in the table entries + db.put({"_id": JSON.stringify( entry_id), "name": JSON.stringify( json.name ), "favarite_game": JSON.stringify( json.favarite_game ), + "game_cost": JSON.stringify( json.game_cost ), "hours_played":JSON.stringify( json.hours_played ), "cost_per_hour":JSON.stringify( json.cost_per_hour )}) + + response.writeHead( statusCode, "OK", {'Content-Type': 'text/plain' }) + response.end(JSON.stringify( entry )) }) } @@ -54,18 +68,15 @@ const sendFile = function( response, filename ) { // if the error = null, then we've loaded the file successfully if( err === null ) { - // status code: https://httpstatuses.com - response.writeHeader( 200, { 'Content-Type': type }) + response.writeHeader( statusCode, { 'Content-Type': type }) response.end( content ) - }else{ - // file not found, error code 404 - response.writeHeader( 404 ) + response.writeHeader( errorCode ) response.end( '404 Error: File Not Found' ) - } + }) } diff --git a/shrinkwrap.yaml b/shrinkwrap.yaml new file mode 100644 index 00000000..f6d7ea4f --- /dev/null +++ b/shrinkwrap.yaml @@ -0,0 +1,15 @@ +dependencies: + mime: 2.4.6 +packages: + /mime/2.4.6: + dev: false + engines: + node: '>=4.0.0' + hasBin: true + resolution: + integrity: sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA== +registry: 'https://registry.npmjs.org/' +shrinkwrapMinorVersion: 9 +shrinkwrapVersion: 3 +specifiers: + mime: ^2.4.4 From c89a643d3a1d522d101be4ea6578774b9e7ba3e6 Mon Sep 17 00:00:00 2001 From: "Glitch (a2-shortstack)" Date: Wed, 30 Sep 2020 20:24:25 +0000 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=B7=F0=9F=8E=B7=20Updated=20with?= =?UTF-8?q?=20Glitch?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- package.json | 7 ++- server.improved.js | 143 +++++++++++++++++++++++---------------------- 3 files changed, 78 insertions(+), 74 deletions(-) diff --git a/README.md b/README.md index 4eda6e69..97f509b3 100755 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ https://glitch.com/~a2-shortstack -https://glitch.com/edit/#!/a2-shortstack?path=README.md%3A3%3A0 +https://glitch.com/edit/#!/join/5a913488-40d8-4d25-9210-5a42e41fd157 ## A Suggestion On Your Future Gameplay Use margin-left on almost everything, and center-align for text; all css selectors are implemented. To run the project, need to type npm install mime and npm install pouchdb. Also make sure you have "enabled npm" when the project doesn't run. diff --git a/package.json b/package.json index 5996bf85..752a0dce 100755 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "Zaiyang Zhong", + "name": "", "version": "", "description": "You will know if or not to buy new games", "author": "Zaiyang Zhong", @@ -9,6 +9,7 @@ }, "dependencies": { "mime": "^2.4.6", - "pouchdb": "^7.2.2" + "pouchdb": "^7.2.2", + "node": "^14.11.0" } -} +} \ No newline at end of file diff --git a/server.improved.js b/server.improved.js index 2dfd0195..697c45eb 100644 --- a/server.improved.js +++ b/server.improved.js @@ -1,83 +1,86 @@ -let PouchDb = require('pouchdb'); +let PouchDb = require("pouchdb"); -let db = new PouchDb('my_db'); +let db = new PouchDb("my_db"); -var entry_id = 0 +var entry_id = 0; -const statusCode = 200 -const errorCode = 404 +const statusCode = 200; +const errorCode = 404; -const appdata = [] +const appdata = []; -const http = require( 'http' ), - fs = require( 'fs' ), - // IMPORTANT: you must run `npm install` in the directory for this assignment - // to install the mime library used in the following line of code - mime = require( 'mime' ), - dir = 'public/', - port = 3000 +const http = require("http"), + fs = require("fs"), + // IMPORTANT: you must run `npm install` in the directory for this assignment + // to install the mime library used in the following line of code + mime = require("mime"), + dir = "public/", + port = 3000; -const server = http.createServer( function( request,response ) { - if( request.method === 'GET' ) { - handleGet( request, response ) - }else if( request.method === 'POST' ){ - handlePost( request, response ) +const server = http.createServer(function(request, response) { + if (request.method === "GET") { + handleGet(request, response); + } else if (request.method === "POST") { + handlePost(request, response); } -}) +}); -const handleGet = function( request, response ) { - const filename = dir + request.url.slice( 1 ) +const handleGet = function(request, response) { + const filename = dir + request.url.slice(1); - if( request.url === '/' ) { - sendFile( response, 'public/index.html' ) - }else{ - sendFile( response, filename ) + if (request.url === "/") { + sendFile(response, "public/index.html"); + } else { + sendFile(response, filename); } -} - -const handlePost = function( request, response ) { - let dataString = '' - - request.on( 'data', function( data ) { - dataString += data - }) - - request.on( 'end', function() { - console.log( JSON.parse( dataString ) ) - - // ... do something with the data here!!! - - - const json = JSON.parse(dataString) +}; + +const handlePost = function(request, response) { + let dataString = ""; + + request.on("data", function(data) { + dataString += data; + }); + + request.on("end", function() { + console.log(JSON.parse(dataString)); + + // ... do something with the data here!!! + + const json = JSON.parse(dataString); entry_id++; - let entry = { id : entry_id } + let entry = { id: entry_id }; // parse in the table entries - db.put({"_id": JSON.stringify( entry_id), "name": JSON.stringify( json.name ), "favarite_game": JSON.stringify( json.favarite_game ), - "game_cost": JSON.stringify( json.game_cost ), "hours_played":JSON.stringify( json.hours_played ), "cost_per_hour":JSON.stringify( json.cost_per_hour )}) - - response.writeHead( statusCode, "OK", {'Content-Type': 'text/plain' }) - response.end(JSON.stringify( entry )) - }) -} - -const sendFile = function( response, filename ) { - const type = mime.getType( filename ) - - fs.readFile( filename, function( err, content ) { - - // if the error = null, then we've loaded the file successfully - if( err === null ) { - // status code: https://httpstatuses.com - response.writeHeader( statusCode, { 'Content-Type': type }) - response.end( content ) - }else{ - // file not found, error code 404 - response.writeHeader( errorCode ) - response.end( '404 Error: File Not Found' ) - } - - }) -} - -server.listen( process.env.PORT || port ) + db.put({ + _id: JSON.stringify(entry_id), + name: JSON.stringify(json.name), + favarite_game: JSON.stringify(json.favarite_game), + game_cost: JSON.stringify(json.game_cost), + hours_played: JSON.stringify(json.hours_played), + cost_per_hour: JSON.stringify(json.cost_per_hour) + }); + + response.writeHead(statusCode, "OK", { "Content-Type": "text/plain" }); + response.end(JSON.stringify(entry)); + }); +}; + +const sendFile = function(response, filename) { + const type = mime.getType(filename); + + fs.readFile(filename, function(err, content) { + // if the error = null, then we've loaded the file successfully + if (err === null) { + // status code: https://httpstatuses.com + response.writeHeader(statusCode, { "Content-Type": type }); + response.end(content); + } else { + // file not found, error code 404 + response.writeHeader(errorCode); + response.end("404 Error: File Not Found"); + } + }); +}; + +server.listen(process.env.PORT || port);