diff --git a/README.md b/README.md index 493995c1..4bd18096 100644 --- a/README.md +++ b/README.md @@ -1,100 +1,36 @@ -Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js -=== -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 `
+ + + + + + +
NameCat AgeCat Age CategoryCat BreedFavorite Activity
+ + + + \ No newline at end of file diff --git a/public/js/main.js b/public/js/main.js index a569258f..e8e0ff84 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -7,21 +7,128 @@ 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 input1 = document.querySelector( '#name' ) + const input2 = document.querySelector( '#age' ) + const input3 = document.querySelector( '#breed' ) + const input4 = document.querySelector( '#favAct' ) + + + json = { name: input1.value, age: input2.value, breed: input3.value, favAct: input4.value, toBeDeleted: false} + body = JSON.stringify(json) + // console.log(input1.value) + + + const response = await fetch( '/submit', { + + method:'POST', + body + }).then( async function (response){ + let newData = await response.json() + render(newData) + + }) + + + +} + +const del = function(event){ + + event.preventDefault() + + const input1 = document.querySelector( '#name' ) + const input2 = document.querySelector( '#age' ) + const input3 = document.querySelector( '#breed' ) + const input4 = document.querySelector( '#favAct' ) + + + json = { name: "kitty", age: 1, breed: 132, favAct: 12, toBeDeleted: true} + + body = JSON.stringify(json) + + const response = fetch( '/submit', { + method:'POST', - body + body + }).then( async function (response){ + let newData = await response.json() + + if(newData.toBeDeleted===true){ + System.out.println("hey") + } + deleteRow(newData) + }) - const text = await response.text() - console.log( 'text:', text ) + } + + + window.onload = function() { const button = document.querySelector("button"); + const deletebtn = document.getElementById("deletebtn"); + button.onclick = submit; -} \ No newline at end of file + deletebtn.onclick = del; + + + }; + + render = function(newData){ + const table = document.querySelector( '#table'); + var td1 = document.createElement("td"); + var td2 = document.createElement("td"); + var td3 = document.createElement("td"); + var td4 = document.createElement("td"); + var td5 = document.createElement("td"); + var row = document.createElement("tr"); + + + td1.innerHTML = document.getElementById("name").value; + td2.innerHTML = document.getElementById("age").value; + td3.innerHTML = document.getElementById("breed").value; + td4.innerHTML = document.getElementById("favAct").value; + td5.innerHTML = ageCategory(document.getElementById("age").value); + + row.append(td1); + row.append(td2); + row.append(td5); + row.append(td3); + row.append(td4); + + table.append(row); + + + } + + deleteRow = function(newData){ + table.deleteRow(1) + + } + + function ageCategory(x){ + if(x < 1){ + return "kitten" + } + else if(x < 3){ + return "young adult" + } + else if(x < 7){ + return "adult" + } + else if(x < 10){ + return "mature" + } + else if(x < 14){ + return "senior" + } + else if(x > 15){ + return "geriatric" + } + + } diff --git a/server.improved.js b/server.improved.js index 9ac27fb8..8520abbf 100644 --- a/server.improved.js +++ b/server.improved.js @@ -8,11 +8,9 @@ const http = require( 'http' ), dir = 'public/', port = 3000 -const appdata = [ - { 'model': 'toyota', 'year': 1999, 'mpg': 23 }, - { 'model': 'honda', 'year': 2004, 'mpg': 30 }, - { 'model': 'ford', 'year': 1987, 'mpg': 14} -] +const appdata = [] + + const server = http.createServer( function( request,response ) { if( request.method === 'GET' ) { @@ -20,6 +18,7 @@ const server = http.createServer( function( request,response ) { }else if( request.method === 'POST' ){ handlePost( request, response ) } + }) const handleGet = function( request, response ) { @@ -40,15 +39,34 @@ const handlePost = function( request, response ) { }) request.on( 'end', function() { - console.log( JSON.parse( dataString ) ) - + // console.log("Server") + + // console.log(appdata) // ... do something with the data here!!! - + // if /delete, then call delEntry + // console.log(request.url) + if(request.url === '/submit'){ + // console.log( JSON.parse(dataString)) + + let newItem = JSON.parse(dataString) + if(newItem.toBeDeleted === true){ + appdata.splice(0,1) + } + else { + appdata.push(newItem) + } + + } + + response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) - response.end('test') + response.write(JSON.stringify(appdata)) + response.end() }) } + + const sendFile = function( response, filename ) { const type = mime.getType( filename )