diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..ccb2c800 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules/ +package-lock.json \ No newline at end of file diff --git a/README.md b/README.md index 493995c1..f8dd94fe 100644 --- a/README.md +++ b/README.md @@ -1,100 +1,7 @@ -Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js -=== +Tim Connors http://a2-timconnors33.glitch.me -Due: September 11th, by 11:59 AM. - -This assignment aims to introduce you to creating a prototype two-tiered web application. -Your application will include the use of HTML, CSS, JavaScript, and Node.js functionality, with active communication between the client and the server over the life of a user session. - -Baseline Requirements ---- - -There is a large range of application areas and possibilities that meet these baseline requirements. -Try to 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 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 `
+ + + + + + + + + + +
Player NameGames PlayedTotal PointsTotal ReboundsTotal AssistsPoints Per GameRebounds Per GameAssists Per Game
+ + diff --git a/public/js/main.js b/public/js/main.js index a569258f..36c4605b 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -1,5 +1,3 @@ -// FRONT-END (CLIENT) JAVASCRIPT HERE - const submit = async function( event ) { // stop form submission from trying to load // a new .html page for displaying results... @@ -7,9 +5,14 @@ const submit = async function( event ) { // remains to this day event.preventDefault() - const input = document.querySelector( '#yourname' ), - json = { yourname: input.value }, - body = JSON.stringify( json ) + const json = { + playerName: document.getElementById("playerName").value, + gamesPlayed: document.getElementById("gamesPlayed").value, + totalPoints: document.getElementById("totalPoints").value, + totalRebounds: document.getElementById("totalRebounds").value, + totalAssists: document.getElementById("totalAssists").value + }, + body = JSON.stringify(json) const response = await fetch( '/submit', { method:'POST', @@ -19,9 +22,41 @@ const submit = async function( event ) { const text = await response.text() console.log( 'text:', text ) + const newPlayerData = JSON.parse(text) + populateTable(newPlayerData) } -window.onload = function() { - const button = document.querySelector("button"); +window.onload = async function() { + + const response = await fetch( '/appdata', { + method:'GET', + }) + + const text = await response.text() + + console.log( 'text:', text ) + const players = JSON.parse(text) + populateTable(players) + const playerTable = document.getElementById("playerTable") + const button = document.querySelector("button"); button.onclick = submit; + +} + +function populateTable(data) { + console.log('in populateTable') + const playerTable = document.getElementById("playerTable") + data.forEach(object => { + const row = document.createElement('tr') + row.innerHTML = '' + object.playerName + '' + + '' + object.gamesPlayed + '' + + '' + object.totalPoints + '' + + '' + object.totalRebounds + '' + + '' + object.totalAssists + '' + + '' + object.pointsPerGame + '' + + '' + object.reboundsPerGame + '' + + '' + object.assistsPerGame + ''; + playerTable.appendChild(row) + + }) } \ No newline at end of file diff --git a/server.improved.js b/server.improved.js index 9ac27fb8..bcebe954 100644 --- a/server.improved.js +++ b/server.improved.js @@ -1,17 +1,40 @@ const http = require( 'http' ), fs = require( 'fs' ), - // IMPORTANT: you must run `npm install` in the directory for this assignment - // to install the mime library if you're testing this on your local machine. - // However, Glitch will install it automatically by looking in your package.json - // file. mime = require( 'mime' ), dir = 'public/', port = 3000 const appdata = [ - { 'model': 'toyota', 'year': 1999, 'mpg': 23 }, - { 'model': 'honda', 'year': 2004, 'mpg': 30 }, - { 'model': 'ford', 'year': 1987, 'mpg': 14} + { + 'playerName': 'LeBron James', + 'gamesPlayed': 55, + 'totalPoints': 1590, + 'totalRebounds': 457, + 'totalAssists': 375, + 'pointsPerGame': 28.9, + 'reboundsPerGame': 8.3, + 'assistsPerGame': 6.8 + }, + { + 'playerName': 'Jayson Tatum', + 'gamesPlayed': 74, + 'totalPoints': 2225, + 'totalRebounds': 649, + 'totalAssists': 342, + 'pointsPerGame': 30.1, + 'reboundsPerGame': 8.8, + 'assistsPerGame': 4.6 + }, + { + 'playerName': 'Nikola Jokic', + 'gamesPlayed': 69, + 'totalPoints': 1690, + 'totalRebounds': 817, + 'totalAssists': 678, + 'pointsPerGame': 24.5, + 'reboundsPerGame': 11.8, + 'assistsPerGame': 9.8 + } ] const server = http.createServer( function( request,response ) { @@ -27,6 +50,10 @@ const handleGet = function( request, response ) { if( request.url === '/' ) { sendFile( response, 'public/index.html' ) + }else if (request.url === "/appdata") { + const body = JSON.stringify(appdata) + response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) + response.end(body) }else{ sendFile( response, filename ) } @@ -40,12 +67,20 @@ const handlePost = function( request, response ) { }) request.on( 'end', function() { - console.log( JSON.parse( dataString ) ) + const playerData = JSON.parse(dataString) + + playerData.pointsPerGame = (playerData.totalPoints / playerData.gamesPlayed).toFixed(1) + playerData.reboundsPerGame = (playerData.totalRebounds / playerData.gamesPlayed).toFixed(1) + playerData.assistsPerGame = (playerData.totalAssists / playerData.gamesPlayed).toFixed(1) - // ... do something with the data here!!! + console.log(playerData) + appdata.push(playerData) + + + const body = JSON.stringify(appdata.slice(-1)) response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) - response.end('test') + response.end(body) }) }