diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..b7a3638 Binary files /dev/null and b/.DS_Store differ diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/a2-shortstack.iml b/.idea/a2-shortstack.iml new file mode 100644 index 0000000..0c8867d --- /dev/null +++ b/.idea/a2-shortstack.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..8934f6c --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/README.md b/README.md index 9434c98..89632b3 100644 --- a/README.md +++ b/README.md @@ -2,64 +2,7 @@ Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and === 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 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 `" + + "" + + "" + + "" + + "" + + "" + + const character = fetch('/Inbox', { + method: 'GET' + }).then(resp => resp.json()).then( + data => { console.log(data) + //for (let i = 0; i < data.length; i ++){ + let num = 0 + data.forEach(function(char){ + + let row = "" + + "" + + "" + + "" + + `` + + "" + + document.getElementById( 'text_table' ).innerHTML += row + num ++ + }) + }) + + return false +} + + +const displayEdits = function( charNum ) { + + const character = fetch('/Inbox', { + method: 'GET' + }).then(resp => resp.json()).then( + data => { console.log(data) + let char = data[charNum] + document.getElementById( 'text_table' ).style.display = "none" + document.getElementById( 'Outbox' ).style.display = "none" + document.getElementById( 'text_sent' ).style.display = "none" + document.getElementById( 'Editor' ).style.display = "block" + document.getElementById( 'Editor' ).innerHTML = `
+
+

+ Typing... +

+
`+` +
+
+
From
+
+ + +
+
+ + +
+
+ + +
+
` + }) + return false +} + +const editMsg = function( number ){ + const newMsg = { + From: document.getElementById( 'from' ).value, + To: document.getElementById( 'to' ).value, + Content: document.getElementById( 'content' ).value + /*From: '1', + To: '2, + Content: 'test' + */ + } + + if ( isValid(newMsg) ) { + debugger + const char = { charNum : number, charEdit: newMsg} + const body = JSON.stringify( char ) + + fetch('/edit', { + method: 'POST', + body + }) + } + location.reload() + viewMsg() + return false +} + +const mainScreen = function() { + + document.getElementById( 'text_table' ).style.display = "none" + document.getElementById( 'Outbox' ).style.display = "flex" + document.getElementById( 'text_sent' ).style.display = "none" + document.getElementById( 'Editor' ).style.display = "none" + location.reload() + return false +} + +window.onload = function() { + const sendButton = document.getElementById( 'send' ) + sendButton.onclick = text_constructor + + const outButton = document.getElementById( 'to-character-form' ) + outButton.onclick = mainScreen + + const inButton = document.getElementById( 'Inbox' ) + inButton.onclick = viewMsg + + document.getElementById( 'text_table' ).style.display = "none" + document.getElementById( 'Outbox' ).style.display = "flex" + document.getElementById( 'text_sent' ).style.display = "none" + document.getElementById( 'Editor' ).style.display = "none" + +} \ No newline at end of file diff --git a/server.improved.js b/server.improved.js index 26673fc..840d646 100644 --- a/server.improved.js +++ b/server.improved.js @@ -1,72 +1,144 @@ 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 + 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 appdata = [ - { 'model': 'toyota', 'year': 1999, 'mpg': 23 }, - { 'model': 'honda', 'year': 2004, 'mpg': 30 }, - { 'model': 'ford', 'year': 1987, 'mpg': 14} + { 'from': 'Vanessa', 'to': 'Thursday', 'content': 'My cutie!' } ] 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 === '/view-characters' ){ + const type = mime.getType( appdata ) + response.writeHeader( 200, { 'Content-Type': type } ) + response.write( JSON.stringify( appdata ) ) + console.log( JSON.stringify( appdata ) ) + response.end() + } + else{ sendFile( response, filename ) } } const handlePost = function( request, response ) { + debugger let dataString = '' request.on( 'data', function( data ) { - dataString += data + dataString += data }) request.on( 'end', function() { - console.log( JSON.parse( dataString ) ) - // ... do something with the data here!!! + if ( request.url === '/submit') { + let inputData = JSON.parse( dataString ) + let totalStats = calculateStats(parseInt(inputData.strength), parseInt(inputData.dexterity), parseInt(inputData.intelligence), parseInt(inputData.luck), parseInt(inputData.odd)) + const newChar = {'name': inputData.name, + 'age': inputData.age, + 'occupation': inputData.occupation, + 'strength': inputData.strength, + 'dexterity': inputData.dexterity, + 'intelligence': inputData.intelligence, + 'luck': inputData.luck, + 'odd': inputData.odd, + 'total': totalStats + } + console.log( newChar ) + + appdata.push( newChar ) + response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) + response.end() + + } + else if ( request.url === '/delete') { + let inputData = JSON.parse( dataString ) + let index = inputData.charNum + + //console.log( "Attempting to delete: " + inputData ) + + if ( index > -1 ) { + appdata.splice( index, 1 ) + } + + response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) + response.end() + + } + else if ( request.url === '/edit') { + debugger + let inputData = JSON.parse( dataString ) + console.log(inputData) + let index = inputData.charNum + console.log(index) + let totalStats = calculateStats(parseInt(inputData.charEdit.strength), parseInt(inputData.charEdit.dexterity), parseInt(inputData.charEdit.intelligence), parseInt(inputData.charEdit.luck), parseInt(inputData.charEdit.odd)) + const edited = {'name': inputData.charEdit.name, + 'age': inputData.charEdit.age, + 'occupation': inputData.charEdit.occupation, + 'strength': inputData.charEdit.strength, + 'dexterity': inputData.charEdit.dexterity, + 'intelligence': inputData.charEdit.intelligence, + 'luck': inputData.charEdit.luck, + 'odd': inputData.charEdit.odd, + 'total': totalStats + } + console.log(edited) + if ( index > -1 ) { + appdata.splice(index, 1, edited) + console.log(appdata) + } + response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) + response.end() + + } + else + // nothing happens + response.end() - response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) - response.end() }) } +const calculateStats = function (str, dex, int, luk, odd) { + + return str + dex + int + luk + odd + +} + const sendFile = function( response, filename ) { - const type = mime.getType( filename ) + const type = mime.getType( filename ) - fs.readFile( filename, function( err, content ) { + fs.readFile( filename, function( err, content ) { - // if the error = null, then we've loaded the file successfully - if( err === null ) { + // 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 ) + // status code: https://httpstatuses.com + response.writeHeader( 200, { 'Content-Type': type }) + response.end( content ) - }else{ + }else{ - // file not found, error code 404 - response.writeHeader( 404 ) - response.end( '404 Error: File Not Found' ) + // file not found, error code 404 + response.writeHeader( 404 ) + response.end( '404 Error: File Not Found' ) - } - }) + } + }) } -server.listen( process.env.PORT || port ) +server.listen( process.env.PORT || port ) \ No newline at end of file
FromToContent
" + char.From + "" + char.To + "" + char.Content + " ` + + `