From 441cd5129927daa8d9a5bd6ec2b6b3066461a02a Mon Sep 17 00:00:00 2001 From: hezi-k <34650192+hezi-k@users.noreply.github.com> Date: Wed, 16 Sep 2020 22:30:31 -0400 Subject: [PATCH 1/2] Add files via upload --- README.md | 99 ++-------- node_modules/mime/CHANGELOG.md | 268 ++++++++++++++++++++++++++++ node_modules/mime/LICENSE | 21 +++ node_modules/mime/Mime.js | 95 ++++++++++ node_modules/mime/README.md | 187 +++++++++++++++++++ node_modules/mime/cli.js | 10 ++ node_modules/mime/index.js | 4 + node_modules/mime/lite.js | 4 + node_modules/mime/package.json | 81 +++++++++ node_modules/mime/types/other.js | 1 + node_modules/mime/types/standard.js | 1 + package-lock.json | 11 ++ public/css/style.css | 59 +++++- public/game.html | 24 +++ public/index.html | 133 ++++++++++++-- public/js/scripts.js | 68 ++++++- public/players.html | 41 +++++ server.improved.js | 34 ++-- 18 files changed, 1033 insertions(+), 108 deletions(-) create mode 100644 node_modules/mime/CHANGELOG.md create mode 100644 node_modules/mime/LICENSE create mode 100644 node_modules/mime/Mime.js create mode 100644 node_modules/mime/README.md create mode 100644 node_modules/mime/cli.js create mode 100644 node_modules/mime/index.js create mode 100644 node_modules/mime/lite.js create mode 100644 node_modules/mime/package.json create mode 100644 node_modules/mime/types/other.js create mode 100644 node_modules/mime/types/standard.js create mode 100644 package-lock.json create mode 100644 public/game.html create mode 100644 public/players.html diff --git a/README.md b/README.md index 3945c152..ba64ed14 100755 --- a/README.md +++ b/README.md @@ -1,93 +1,26 @@ Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js === - -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 `
+ + + + + + + + + +
NicknameUsernamePasswordPref. FootPositonDate JoinedDelete
+ + + + + diff --git a/server.improved.js b/server.improved.js index 26673fc0..5a077476 100644 --- a/server.improved.js +++ b/server.improved.js @@ -7,25 +7,37 @@ const http = require( 'http' ), port = 3000 const appdata = [ - { 'model': 'toyota', 'year': 1999, 'mpg': 23 }, - { 'model': 'honda', 'year': 2004, 'mpg': 30 }, - { 'model': 'ford', 'year': 1987, 'mpg': 14} -] + { id: 0, username: "Hezi", Password: "hello", Foot: "left", Position: "def", dateJoined: "2020-9-21" } +]; + +let playerPage = null; +fs.readFile("public/players.html", function(err, content) { + playerPage = content; +}); const server = http.createServer( function( request,response ) { if( request.method === 'GET' ) { - handleGet( request, response ) + handleGet( request, response ) }else if( request.method === 'POST' ){ - handlePost( request, response ) + handlePost( request, response ) } }) const handleGet = function( request, response ) { - const filename = dir + request.url.slice( 1 ) - + const filename = dir + request.url.slice( 1 ) if( request.url === '/' ) { sendFile( response, 'public/index.html' ) - }else{ + } + else if( request.url === "/players") { + sendFile( response, "public/players.html") + } + else if( request.url === "/game") { + sendFile( response, "public/game.html"); + } + else if(request.url === "/style.css") { + sendFile( response, "public/css/style.css"); + } + else{ sendFile( response, filename ) } } @@ -34,7 +46,7 @@ const handlePost = function( request, response ) { let dataString = '' request.on( 'data', function( data ) { - dataString += data + dataString += data }) request.on( 'end', function() { @@ -48,7 +60,7 @@ const handlePost = function( request, response ) { } const sendFile = function( response, filename ) { - const type = mime.getType( filename ) + const type = mime.getType( filename ) fs.readFile( filename, function( err, content ) { From 9bebcbe41ba788a14bc513f23f3d81ad6e96b40d Mon Sep 17 00:00:00 2001 From: hezi-k <34650192+hezi-k@users.noreply.github.com> Date: Wed, 16 Sep 2020 23:00:12 -0400 Subject: [PATCH 2/2] Add files via upload --- README.md | 26 +++++++++++++++----------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index ba64ed14..bb6c45ba 100755 --- a/README.md +++ b/README.md @@ -1,26 +1,30 @@ -Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js -=== +# Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js --- + +https://a2-hezi-k.glitch.me + ## WPI Football + WPI Football seeks to address the need of organising pick up football in WPI. Currently the system is set up on messenger. Someone will send a message asking to play and people respond accordingly. However the system can be confusing and convoluted. I would really like to develop this website further. As a starter, I wanted to create a system where other players can check eachother out and see simple things like their name and their stats. I wanted to make this on a separate page however I could not figure out how to do this with the sever. You can see the commented out code in the respective files. I would like to make this more robust and let people add more stats or even profile pictures. For now a user is able to put in their username, password and some basic stats and this is displayed in a table below. However, I think this has a lot of potential. One other future I could not figure out was how to delete an entry, with a button. However, I think I need to spend more time on this. ## Technical Achievements -- **Tech Achievement 1**: This single-page app utilizes a combination of forms and tables so that a user can submit data, and the app will display both the data and the result of the derived field. The form includes a username, password, nickname, preferred foot, and position. +- **Tech Achievement 1**: This single-page app utilizes a combination of forms and tables so that a user can submit data, and the app will display both the data and the result of the derived field. The form includes a username, password, nickname, preferred foot, and position. ### Design/Evaluation Achievements + - **Student Interview 1**: -Student Name: Lindberg Simpson -Problems: -Surprising Comments: -Changes to be made based on feedback: +Student Name: Lindberg Simpson +Problems: No problems mentioned when using the site +Comments: The user didn't have any issues using the website. They did comment that it would be nice fot the entry forms to be aligned. +Changes to be made based on feedback: In future I will make sure that the forms are aligned. I usually like to focus on looks but this time I didnt have time to do that. So I will spend some time making it look nice - **Student Interview 2**: -Student Name: Akul Argawal -Problems: -Surprising Comments: -Changes to be made based on feedback: +Student Name: Akul Argawal +Problems: No problems mentioned when using the site +Comments: he user didn't have any issues using the website either. They did mention that it would be cool to display the football positions and display their peoples names. +Changes to be made based on feedback: The user seemed to be interested in having more of a graphical interface which I will try implement.