diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000..562cc640 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "pwa-chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:3000", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/README.md b/README.md index 996cf12d..ebcac216 100644 --- a/README.md +++ b/README.md @@ -1,97 +1,20 @@ -Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js -=== +## Internet Lurkers in The Database -Due: September 9th, by 11:59 AM. +Project takes in names, birth years, and current year. Modifies them in the server, implements new fields to the server using date years, and also stores the data in the server while also displaying it to the user. CSS is used throughout the project for styling. JS is used for front end communication with server. -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 `
+ + + + + + + + + + +
Names:Birth Years:Year Timestamps:Age Timestamps:
yourName 1111 2222 1111
+
+ +
- - + + diff --git a/public/js/scripts.js b/public/js/scripts.js index de052eae..1c715f83 100644 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -1,3 +1,57 @@ // Add some Javascript code here, to run on the front end. +const submit = function( e ) { + // prevent default form action from being carried out + e.preventDefault() -console.log("Welcome to assignment 2!") \ No newline at end of file + const input = document.querySelector( '#yourname' ), + input2 = document.querySelector( '#birth' ), + input3 = document.querySelector( '#cur' ), + json = { yourname: input.value, birth: input2.value, cur: input3.value}, + body = JSON.stringify( json ) + + fetch( '/submit', { + method:'POST', + body + }) + .then( function( response ) { + // do something with the reponse + return response.json() + }) + + .then( function(json){ + + console.log( json ) + const div = document.createElement("div") + const element = document.createElement('p') + const element2 = document.createElement('p') + const element3 = document.createElement('p') + const element4 = document.createElement('p') + const element5 = document.createElement('p') + element.innerHTML = json.yourname + element2.innerHTML = json.birth + element3.innerHTML = json.cur + if (parseInt(json.cur) - parseInt(json.birth) > 30){ element4.innerHTML = (parseInt(json.cur) - parseInt(json.birth)).toString() + " your too old for the internet!" + }else element4.innerHTML = (parseInt(json.cur) - parseInt(json.birth)).toString() + " your too young for the internet!" + + element5.innerHTML = "-------------------------------------------------------------------" + + // for (var i = 0; i < arrayLength; i++) { + // console.log(myStringArray[i]); + // //Do something + + // document.body.appendChild(myStringArray[i].yourname + myStringArray[i].birth + myStringArray[i].cur + myStringArray[i].age)} + + document.body.appendChild(element).appendChild(element2).appendChild(element3).appendChild(element4).appendChild(element5) + + + + }) + + return false} + + + + window.onload = function() { + const button = document.querySelector( 'button' ) + button.onclick = submit + } diff --git a/server.improved.js b/server.improved.js index 26673fc0..da9fc9a2 100644 --- a/server.improved.js +++ b/server.improved.js @@ -7,9 +7,7 @@ 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} + { 'name': 'yourName', 'Birthday Year': '1111', 'Current Year': '2222', 'Age Estimate': 1111 }, ] const server = http.createServer( function( request,response ) { @@ -29,6 +27,7 @@ const handleGet = function( request, response ) { sendFile( response, filename ) } } + // ... do something with the data here!!! const handlePost = function( request, response ) { let dataString = '' @@ -38,12 +37,19 @@ const handlePost = function( request, response ) { }) request.on( 'end', function() { - console.log( JSON.parse( dataString ) ) + const json = JSON.parse( dataString ) + json.yourname += ' is a cool name!' + json.birth += ' is an amazing birth year!' + json.cur += ', wow time flies by!' + // json.arr = appdata; +//Storing to server, with derived estimated age + appdata[appdata.length] = (json.yourname, json.birth, json.cur, (parseInt(json.cur) - parseInt(json.birth))) + + response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) + response.end(JSON.stringify(json)) - // ... do something with the data here!!! + - response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) - response.end() }) }