diff --git a/README.md b/README.md index f229958..139ec67 100644 --- a/README.md +++ b/README.md @@ -1,98 +1,10 @@ -Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js -=== - -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 `
+ +
+ + + + + diff --git a/public/js/scripts.js b/public/js/scripts.js index de052ea..d2a5005 100644 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -1,3 +1,137 @@ -// Add some Javascript code here, to run on the front end. +/*// STARTER CODE submit function +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' ), + json = { yourname: input.value }, + body = JSON.stringify( json ) + + fetch( '/submit', { + method:'POST', + body + }) + .then( function( response ) { + // do something with the reponse + //console.log( response ) + }) + + return false +}*/ + +// tells the server to add a todo item to the list +const add_item = function( e ) { + // prevent default form action from being carried out + e.preventDefault() + + const input_item = document.querySelector( '#item' ), + input_date = document.querySelector( '#date' ), + new_item = { item: input_item.value, date: input_date.value}, + body = JSON.stringify( new_item ) + + fetch( '/add', { + method:'POST', + body + }) + .then( response => response.json()) + .then( item1 => { + + const table = document.getElementById("todo-list") + + const row = elementFromHtml(` + + `+ item1.item +` + `+ item1.date +` + + + + + `) + // console.log(row) + // console.log(row.children[2].children[0]) + row.children[2].children[0].onclick = delete_item + + table.appendChild(row) + }) + + return false +} + +// deletes the row from the table and the item from the server list +const delete_item = function( e ) { + // prevent default form action from being carried out + e.preventDefault() + console.log("DELETEEEEEEEEEEE") + + // const table = document.getElementById('todo-list'); + // const rowIndex = self.parentNode.parentNode.rowIndex; + // console.log(rowIndex) + // table.deleteRow(rowIndex); + +// const input_item = document.querySelector( '#item' ), +// input_date = document.querySelector( '#date' ), +// new_item = { item: input_item.value, date: input_date.value}, +// body = JSON.stringify( new_item ) + +// fetch( '/delete', { +// method:'POST', +// body +// }) +// .then( response => response.json()) +// .then( json => { +// json.forEach( item => { +// const p = document.createElement('p'); +// p.innerText = JSON.stringify(item); +// document.body.appendChild(p); +// }) +// }) + + return false +} + +// create html elements from strings +const elementFromHtml = function(html) { + const template = document.createElement("template"); + + template.innerHTML = html.trim(); + + return template.content.firstElementChild; +} + +// on window load +window.onload = function() { + const addbutton = document.querySelector( 'button' ) + addbutton.onclick = add_item + + // ik this probably isn't smart lol + fetch( '/list_items', { + method:'POST', + body:'' + }) + .then( response => response.json()) + .then( json => { + json.forEach( item => { + + const table = document.getElementById("todo-list") + + const row = elementFromHtml(` + + `+ item.item +` + `+ item.date +` + + + + + `) + // console.log(row) + // console.log(row.children[2].children[0]) + row.children[2].children[0].onclick = delete_item + + table.appendChild(row) + }) + }) +} diff --git a/server.improved.js b/server.improved.js index 26673fc..8e2af37 100644 --- a/server.improved.js +++ b/server.improved.js @@ -6,12 +6,25 @@ const http = require( 'http' ), dir = 'public/', port = 3000 +// EXAMPLE DATA const appdata = [ - { 'model': 'toyota', 'year': 1999, 'mpg': 23 }, - { 'model': 'honda', 'year': 2004, 'mpg': 30 }, - { 'model': 'ford', 'year': 1987, 'mpg': 14} + { item: "here is an example to-do item", date: "2022-09-08" }, + { item: "here is a second example item", date: "09/09/22"} ] +const add_item = function(list_item) { + appdata.push(list_item) +} + +const delete_item = function(list_item) { + let x = 0; + for(let i = 0; i < appdata.length; i++) { + if (list_item.item === appdata[i].item) { + appdata.splice(i,i); + } + } +} + const server = http.createServer( function( request,response ) { if( request.method === 'GET' ) { handleGet( request, response ) @@ -20,6 +33,7 @@ const server = http.createServer( function( request,response ) { } }) +// handles GET requests const handleGet = function( request, response ) { const filename = dir + request.url.slice( 1 ) @@ -30,6 +44,7 @@ const handleGet = function( request, response ) { } } +// hangles POST requests const handlePost = function( request, response ) { let dataString = '' @@ -38,12 +53,26 @@ const handlePost = function( request, response ) { }) request.on( 'end', function() { - console.log( JSON.parse( dataString ) ) - - // ... do something with the data here!!! + if(dataString === '') { + response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) + response.end(JSON.stringify(appdata)) + return + } + + const list_item = JSON.parse(dataString) + console.log(list_item) + + if(request.url === "/add") { + add_item(list_item) + response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) + response.end(JSON.stringify(appdata[appdata.length-1])) + } + + if(request.url === "/delete") + delete_item(list_item) response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) - response.end() + response.end(JSON.stringify(appdata)) }) }