diff --git a/README.md b/README.md index f229958..7a55485 100644 --- a/README.md +++ b/README.md @@ -6,93 +6,21 @@ Due: September 8th, 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, modify, or delete (complete at least two) 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 `
+ + + + + + + + +
GameDate BoughtDate CompletedDelete
+ + \ No newline at end of file diff --git a/public/js/scripts.js b/public/js/scripts.js index de052ea..b643960 100644 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -1,3 +1,85 @@ -// Add some Javascript code here, to run on the front end. +function clearEntry() { + document.getElementById("gName").value = "";//game name + document.getElementById("dBought").value = "";//date bought + document.getElementById("dCompleted").value = "";//date completed + document.getElementById("gameToDelete").value = ""; +} -console.log("Welcome to assignment 2!") \ No newline at end of file +const submit = function (e) { + // prevent default form action from being carried out + e.preventDefault(); + + let game = document.getElementById("gName").value, + dateBought = document.getElementById("dBought").value, + dateCompleted = document.getElementById("dCompleted").value, + + json = { + game: game, + dateBought: dateBought, + dateCompleted: dateCompleted, + }; + + let body = JSON.stringify(json); + const jsonParsed = JSON.parse(body); + + fetch("/submit", { + method: "POST", + body, + }).then(function (response) { + response.text().then(function (json) { + console.log("Body: ", body); + let table = document.getElementById("games"), + newRow = table.insertRow(-1), + newGame = newRow.insertCell(0), + newDateBought = newRow.insertCell(1), + newDateCompleted = newRow.insertCell(2), + newDelete = newRow.insertCell(3); + + newGame.innerHTML = jsonParsed.game; + newDateBought.innerHTML = jsonParsed.dateBought; + newDateCompleted.innerHTML = jsonParsed.dateCompleted; + newDelete.innerHTML= ''; + console.log("table:", table); + console.log(json); + }); + }); + + return false; +}; + +const updateList = function (e) { + e.preventDefault(); + + let gameLibrary = document.getElementById("games"); + let body = JSON.stringify(gameLibrary); + console.log(body); + + fetch("/updateList", { + method: "POST", + body, + }) + .then((response) => response.json()) + .then((json) => { + console.log(json); + let gameLibrary = document.getElementById("games"); + gameLibrary.innerHTML = + "GameDate BoughtDate CompletedRemove?"; + + json.forEach((thing) => { + gameLibrary.innerHTML = + gameLibrary.innerHTML + + `${thing.game}${thing.dateBought}${thing.dateCompleted}`; + }); + }); +}; + +window.onload = function () { + const add = document.getElementById("submit"); + add.onclick = submit; +}; + +function deleteRow(r) +{ +var i=r.parentNode.parentNode.rowIndex; +document.getElementById('games').deleteRow(i); +}; diff --git a/server.improved.js b/server.improved.js index 26673fc..3e12f2b 100644 --- a/server.improved.js +++ b/server.improved.js @@ -7,10 +7,19 @@ 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} -] + { + game: "Tetris", + dateBought: "08-15-01", + dateCompleted: "08-15-01", + + }, + { + game: "Tetris", + dateBought: "08-15-01", + dateCompleted: "08-15-01", + + }, +]; const server = http.createServer( function( request,response ) { if( request.method === 'GET' ) { @@ -20,16 +29,27 @@ const server = http.createServer( function( request,response ) { } }) -const handleGet = function( request, response ) { - const filename = dir + request.url.slice( 1 ) - - if( request.url === '/' ) { - sendFile( response, 'public/index.html' ) - }else{ - sendFile( response, filename ) - } -} - +const handleGet = function (request, response) { + const filename = dir + request.url.slice(1); + + if (request.url === "/") + { + sendFile(response, "public/index.html"); + } else if (request.url === "/public/js/scripts.js") + { + sendFile(response, "public/js/scripts.js"); + } else if (request.url === "/public/css/style.css") + { + sendFile(response, "public/css/style.css"); + } else if (request.url === "/submit") + { + response.writeHeader(200, { "Content-Type": "text/plain" }); + response.end(JSON.stringify(appdata)); + } else + { + sendFile(response, filename); + } +}; const handlePost = function( request, response ) { let dataString = '' @@ -39,34 +59,33 @@ 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() - }) -} - -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( 200, { 'Content-Type': type }) - response.end( content ) - - }else{ - - // file not found, error code 404 - response.writeHeader( 404 ) - response.end( '404 Error: File Not Found' ) - - } - }) -} - -server.listen( process.env.PORT || port ) + let jsonData = JSON.parse(dataString); + console.log(jsonData + "1"); + + if (request.url === "/submit") { + console.log(jsonData); + appdata.push(jsonData); + } + response.writeHead(200, "OK", { "Content-Type": "text/plain" }); + response.end(JSON.stringify(appdata)); + }); +}; + +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(200, { "Content-Type": type }); + response.end(content); + } else { + // file not found, error code 404 + response.writeHeader(404); + response.end("404 Error: File Not Found"); + } + }); +}; + +server.listen(process.env.PORT || port); diff --git a/shrinkwrap.yaml b/shrinkwrap.yaml new file mode 100644 index 0000000..43c1986 --- /dev/null +++ b/shrinkwrap.yaml @@ -0,0 +1,15 @@ +dependencies: + mime: 2.6.0 +packages: + /mime/2.6.0: + dev: false + engines: + node: '>=4.0.0' + hasBin: true + resolution: + integrity: sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg== +registry: 'https://registry.npmjs.org/' +shrinkwrapMinorVersion: 9 +shrinkwrapVersion: 3 +specifiers: + mime: ^2.4.4