diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000..4ad04728 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,17 @@ +{ + // 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-node", + "request": "launch", + "name": "Launch Program", + "skipFiles": [ + "/**" + ], + "program": "${workspaceFolder}\\server.improved.js" + } + ] +} \ No newline at end of file diff --git a/README.md b/README.md index 996cf12d..a16e2d1c 100644 --- a/README.md +++ b/README.md @@ -1,97 +1,19 @@ Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js === +## Book Keeper App -Due: September 9th, by 11:59 AM. +https://a2-maddison-caten.glitch.me -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. +My book keeper application keeps track of the books that a person has read. I used the flexbox layout to position the table of books read and the form to add a book side-by-side. The form includes the title, author, score (rating of the book 1-5), notes about the book, and the year the book was finished. -Baseline Requirements ---- +## Design Achievements +(Grasso) +The user had problems with my table not updating +They said that my form is very clear and obvious what to fill in for each input +I would change the way the table updates so when the submit button is clicked the new element is visible in the table -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. +(Jaeger) +The user had issues with elements duplicating when adding a new element and not having modify/delete buttons and the webpage was not very aesthetically pleasing. +When I fixed the add element function they said the table updates correctly and the webpage is very clear +I would change the modify/delete functions when I make them functional and the layout of the webpage -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 `
+ + + + + + + + + + + + + + +
TitleAuthorScore (1-5)NotesYear ReadEditDelete
+ +
+
+

Add Book

+
+
+
+
+ +
+
+
+ - - + + \ No newline at end of file diff --git a/public/js/scripts.js b/public/js/scripts.js index de052eae..3a88b94a 100644 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -1,3 +1,58 @@ -// Add some Javascript code here, to run on the front end. +fetch("/getAppdata") + .then(response => response.json()) + .then(db => { + db.forEach(buildTable); + }); -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(); + + const form = document.querySelector("form"), + json = { + title: form.title.value, + author: form.author.value, + score: form.score.value, + notes: form.notes.value, + }, + body = JSON.stringify(json); + + fetch("/add", { + method: "POST", + body, + headers: { + "Content-Type": "application/json" + } + }) + .then(function (response) { + // do something with the reponse + return response.json(); + }) + + .then(function (json) { + document.querySelector("form").reset(); + buildTable(json); + }); + + return false; +}; + + +window.onload = function () { + const button = document.querySelector("button"); + button.onclick = submit; +} + +function buildTable(json) { + //document.querySelector("#tbody tr").remove(); + + console.log(json) + let row = document.querySelector("#tbody").insertRow(); + row.insertCell(0).innerHTML = json.title; + row.insertCell(1).innerHTML = json.author; + row.insertCell(2).innerHTML = json.score; + row.insertCell(3).innerHTML = json.notes; + row.insertCell(4).innerHTML = json.year; + row.insertCell(5).innerHTML = " "; + row.insertCell(6).innerHTML = " "; +} \ No newline at end of file diff --git a/server.improved.js b/server.improved.js index 26673fc0..f4c27134 100644 --- a/server.improved.js +++ b/server.improved.js @@ -4,13 +4,9 @@ const http = require( 'http' ), // to install the mime library used in the following line of code mime = require( 'mime' ), dir = 'public/', - port = 3000 + port = 3001 -const appdata = [ - { 'model': 'toyota', 'year': 1999, 'mpg': 23 }, - { 'model': 'honda', 'year': 2004, 'mpg': 30 }, - { 'model': 'ford', 'year': 1987, 'mpg': 14} -] +let appdata = []; const server = http.createServer( function( request,response ) { if( request.method === 'GET' ) { @@ -25,6 +21,9 @@ const handleGet = function( request, response ) { if( request.url === '/' ) { sendFile( response, 'public/index.html' ) + }else if(request.url === '/getAppdata') { + response.writeHead(200, "OK", { 'Content-Type': 'text/plain' }); + response.end(JSON.stringify(appdata)); }else{ sendFile( response, filename ) } @@ -41,9 +40,21 @@ const handlePost = function( request, response ) { console.log( JSON.parse( dataString ) ) // ... do something with the data here!!! - + let jsonDS = JSON.parse( dataString ) + let obj = { + title: jsonDS.value, + author: jsonDS.value, + score: jsonDS.value, + notes: jsonDS.value, + } + + jsonDS.year = new Date().getFullYear(); + + appdata.push(jsonDS) + + console.log(JSON.stringify(appdata)) response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) - response.end() + response.end(JSON.stringify(jsonDS)) }) }