From f0bc949bfb6b15081f173b768ec6e4935467d9f5 Mon Sep 17 00:00:00 2001 From: "Glitch (a2-cindytrac)" Date: Sat, 10 Sep 2022 02:52:14 +0000 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=A6=AD=F0=9F=8D=87=20Updated=20with?= =?UTF-8?q?=20Glitch?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 148 ++++++++++++++--------------------- package-lock.json | 9 +++ public/css/style.css | 105 ++++++++++++++++++++++++- public/index.html | 179 +++++++++++++++++++++++++++++++++++-------- public/js/scripts.js | 135 +++++++++++++++++++++++++++++++- server.improved.js | 174 +++++++++++++++++++++++++---------------- shrinkwrap.yaml | 15 ++++ 7 files changed, 574 insertions(+), 191 deletions(-) create mode 100644 package-lock.json create mode 100644 shrinkwrap.yaml diff --git a/README.md b/README.md index f229958..ce7916b 100644 --- a/README.md +++ b/README.md @@ -1,98 +1,64 @@ 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 `
+ + + + + + + + + +
BookAuthorDate StartedDate CompletedTime Spent Reading
+ + - diff --git a/public/js/scripts.js b/public/js/scripts.js index de052ea..e2eb7d2 100644 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -1,3 +1,136 @@ // Add some Javascript code here, to run on the front end. -console.log("Welcome to assignment 2!") \ No newline at end of file +console.log("Welcome to assignment 2!"); + +function calculateDate (date1, date2) { + console.log(date1); + date1 = new Date(date1); + date2 = new Date(date2); + const diffTime = Math.abs(date2 - date1); + const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); + return diffDays + " days"; + console.log(diffTime + " milliseconds"); + console.log(diffDays + " days"); +} + + +function clearEntry() { + document.getElementById("bookname").value = ""; + document.getElementById("authorname").value = ""; + document.getElementById("dateStarted").value = ""; + document.getElementById("dateCompleted").value = ""; + document.getElementById("booknameToDelete").value = ""; + document.getElementById("authornameToDelete").value = ""; +} + + + +const submit = function (e) { + // prevent default form action from being carried out + e.preventDefault(); + + let bookTitle = document.getElementById("bookname").value, + authorName = document.getElementById("authorname").value, + dateStart = document.getElementById("dateStarted").value, + dateComp = document.getElementById("dateCompleted").value; + + let timeTook = calculateDate(dateStart, dateComp), + + json = { + book_title: bookTitle, + author_name: authorName, + date_started: dateStart, + date_comp: dateComp, + time_took: timeTook + }; + + let body = JSON.stringify(json); + const jsonParsed = JSON.parse(body); + + fetch("/submit", { + method: "POST", + body, + }).then(function (response) { + response.text().then(function (json) { + console.log("Body: ", body); + let table = document.getElementById("lib"), + newRow = table.insertRow(-1), + newBook = newRow.insertCell(0), + newAuthor = newRow.insertCell(1), + newDateStart = newRow.insertCell(2), + newDateComp = newRow.insertCell(3), + newTimeTook = newRow.insertCell(4); + + newBook.innerHTML = jsonParsed.book_title; + newAuthor.innerHTML = jsonParsed.author_name; + newDateStart.innerHTML = jsonParsed.date_started; + newDateComp.innerHTML = jsonParsed.date_comp; + newTimeTook.innerHTML = jsonParsed.time_took; + console.log("table:",table); + + console.log(json); + }); + }); + + return false; + + }; + +const removeEntry = function ( e ) { + e.preventDefault() + + const book = document.querySelector( 'booknameToDelete' ) + const author = document.querySelector('authornameToDelete'), + json = { book_title: book.value, author_name: author.value}, + body = JSON.stringify( json ) + + fetch('/removeEntry', { + method:'POST', + body + }) + .then( response => response.json()) + + return false +} + + + +const updateList = function(e) { + e.preventDefault() + + let libList = document.getElementById("lib"); + let body = JSON.stringify(libList); + console.log(body); + + fetch("/updateList", { + method: 'POST', + body + }) + .then( response => response.json()) + .then( json => { + console.log( json ) + let libList = document.getElementById("lib"); + libList.innerHTML = "BookAuthorDate StartedDate CompletedTime Spent ReadingRemove?"; + + json.forEach( thing => { + libList.innerHTML = libList.innerHTML + `${thing.bookTitle}${thing.authorName}${thing.dateStart}${thing.dateComp}${thing.timeTook}` + }) + }) +} + + + + +window.onload = function () { + + + const add = document.getElementById("submit"); + add.onclick = submit; + + const remove = document.getElementById("remove"); + remove.onclick = removeEntry; + + + +}; + diff --git a/server.improved.js b/server.improved.js index 26673fc..76fdbaf 100644 --- a/server.improved.js +++ b/server.improved.js @@ -1,72 +1,118 @@ -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 +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; const appdata = [ - { 'model': 'toyota', 'year': 1999, 'mpg': 23 }, - { 'model': 'honda', 'year': 2004, 'mpg': 30 }, - { 'model': 'ford', 'year': 1987, 'mpg': 14} -] - -const server = http.createServer( function( request,response ) { - if( request.method === 'GET' ) { - handleGet( request, response ) - }else if( request.method === 'POST' ){ - handlePost( request, response ) + { + book_title: "Throne of Glass", + author_name: "Sarah J. Maas", + date_started: "09-01-20", + date_comp: "09-04-20", + time_took: "3 days", + }, + { + book_title: "Throne of Glass", + author_name: "Sarah J. Maas", + date_started: "09-01-20", + date_comp: "09-04-20", + time_took: "3 days", + }, +]; + +const server = http.createServer(function (request, response) { + if (request.method === "GET") { + handleGet(request, response); + } else if (request.method === "POST") { + handlePost(request, response); } -}) - -const handleGet = function( request, response ) { - const filename = dir + request.url.slice( 1 ) - - if( request.url === '/' ) { - sendFile( response, 'public/index.html' ) - }else{ - sendFile( response, filename ) +}); + +const handleGet = function (request, response) { + const filename = dir + request.url.slice(1); + + if (request.url === "/") { + sendFile(response, "public/index.html"); + } else if (request.url === "/public/js/scripts.js") { + sendFile(response, "public/js/scripts.js"); + } else if (request.url === "/public/css/style.css") { + sendFile(response, "public/css/style.css"); + } else if (request.url === "/submit") { + //getting data from appdata + response.writeHeader(200, { "Content-Type": "text/plain" }); + response.end(JSON.stringify(appdata)); + } else { + sendFile(response, filename); } -} - -const handlePost = function( request, response ) { - let dataString = '' +}; - request.on( 'data', function( data ) { - dataString += data - }) +const handlePost = function (request, response) { + let dataString = ""; - request.on( 'end', function() { - console.log( JSON.parse( dataString ) ) + request.on("data", function (data) { + dataString += data; + }); + request.on("end", function () { + console.log(JSON.parse(dataString)); + let jsonData = JSON.parse(dataString); + console.log(jsonData + "1"); // ... do something with the data here!!! - - response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) - response.end() - }) -} - -const sendFile = function( response, filename ) { - const type = mime.getType( filename ) - - fs.readFile( filename, function( err, content ) { - - // 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 ) - - }else{ - - // file not found, error code 404 - response.writeHeader( 404 ) - response.end( '404 Error: File Not Found' ) - - } - }) -} - -server.listen( process.env.PORT || port ) + if (request.url === "/submit") { + console.log(jsonData); //debug + appdata.push(jsonData); //pushing/adding data to appdata + } + + + let index = 0; + let toBeRemoved = []; + let needToDelete = false; + // REMOVES BOOK FROM LIB + appdata.forEach((entry) => { + if (jsonData.book_title == entry.book_title && jsonData.author_name == entry.author_name) { + needToDelete = true; + toBeRemoved.push(index); + console.log("toBeRemoved: ", toBeRemoved); + } + + else { + index++; + } + }) + if (toBeRemoved) { + toBeRemoved.forEach((entryToRemove) => { + appdata.splice(entryToRemove, 1); + console.log(jsonData.book_title + "BOOK"); + console.log(jsonData + "2"); + }); + } + + + response.writeHead(200, "OK", { "Content-Type": "text/plain" }); + response.end(JSON.stringify(appdata)); + }); +}; + + + +const sendFile = function (response, filename) { + const type = mime.getType(filename); + + fs.readFile(filename, function (err, content) { + // 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); + } else { + // file not found, error code 404 + response.writeHeader(404); + response.end("404 Error: File Not Found"); + } + }); +}; + +server.listen(process.env.PORT || port); diff --git a/shrinkwrap.yaml b/shrinkwrap.yaml new file mode 100644 index 0000000..43c1986 --- /dev/null +++ b/shrinkwrap.yaml @@ -0,0 +1,15 @@ +dependencies: + mime: 2.6.0 +packages: + /mime/2.6.0: + dev: false + engines: + node: '>=4.0.0' + hasBin: true + resolution: + integrity: sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg== +registry: 'https://registry.npmjs.org/' +shrinkwrapMinorVersion: 9 +shrinkwrapVersion: 3 +specifiers: + mime: ^2.4.4 From 1678e5f52392d38bdb40ed6ca569450cff969dbd Mon Sep 17 00:00:00 2001 From: "Glitch (a2-cindytrac)" Date: Sat, 10 Sep 2022 02:58:23 +0000 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=91=94=F0=9F=97=BA=EF=B8=8F=20Updated?= =?UTF-8?q?=20with=20Glitch?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/css/style.css | 7 +- public/index.html | 6 +- public/js/scripts.js | 156 ++++++++++++++++++++----------------------- server.improved.js | 17 ++--- 4 files changed, 84 insertions(+), 102 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index c3a1c06..deace0a 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -72,7 +72,6 @@ table { margin-bottom: 50px; width: 75%; font-family: "IM Fell DW Pica", serif; - } label { @@ -94,11 +93,9 @@ div { display: flex; justify-content: space-around; background-color: #7b6a5c; - -gap: 12px; - + } .flex-gap > table { margin: 10px; -} \ No newline at end of file +} diff --git a/public/index.html b/public/index.html index e68dc60..57f63e2 100644 --- a/public/index.html +++ b/public/index.html @@ -81,7 +81,7 @@


- +

Your Library

@@ -113,7 +114,8 @@

- + +
diff --git a/public/js/scripts.js b/public/js/scripts.js index e2eb7d2..d62f0ad 100644 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -2,7 +2,7 @@ console.log("Welcome to assignment 2!"); -function calculateDate (date1, date2) { +function calculateDate(date1, date2) { console.log(date1); date1 = new Date(date1); date2 = new Date(date2); @@ -13,7 +13,6 @@ function calculateDate (date1, date2) { console.log(diffDays + " days"); } - function clearEntry() { document.getElementById("bookname").value = ""; document.getElementById("authorname").value = ""; @@ -23,114 +22,101 @@ function clearEntry() { document.getElementById("authornameToDelete").value = ""; } - - const submit = function (e) { - // prevent default form action from being carried out - e.preventDefault(); + // prevent default form action from being carried out + e.preventDefault(); let bookTitle = document.getElementById("bookname").value, authorName = document.getElementById("authorname").value, dateStart = document.getElementById("dateStarted").value, dateComp = document.getElementById("dateCompleted").value; - + let timeTook = calculateDate(dateStart, dateComp), - - json = { - book_title: bookTitle, - author_name: authorName, - date_started: dateStart, - date_comp: dateComp, - time_took: timeTook - }; + json = { + book_title: bookTitle, + author_name: authorName, + date_started: dateStart, + date_comp: dateComp, + time_took: timeTook, + }; let body = JSON.stringify(json); const jsonParsed = JSON.parse(body); - fetch("/submit", { - method: "POST", - body, - }).then(function (response) { - response.text().then(function (json) { - console.log("Body: ", body); - let table = document.getElementById("lib"), - newRow = table.insertRow(-1), - newBook = newRow.insertCell(0), - newAuthor = newRow.insertCell(1), - newDateStart = newRow.insertCell(2), - newDateComp = newRow.insertCell(3), - newTimeTook = newRow.insertCell(4); - - newBook.innerHTML = jsonParsed.book_title; - newAuthor.innerHTML = jsonParsed.author_name; - newDateStart.innerHTML = jsonParsed.date_started; - newDateComp.innerHTML = jsonParsed.date_comp; - newTimeTook.innerHTML = jsonParsed.time_took; - console.log("table:",table); - - console.log(json); - }); + fetch("/submit", { + method: "POST", + body, + }).then(function (response) { + response.text().then(function (json) { + console.log("Body: ", body); + let table = document.getElementById("lib"), + newRow = table.insertRow(-1), + newBook = newRow.insertCell(0), + newAuthor = newRow.insertCell(1), + newDateStart = newRow.insertCell(2), + newDateComp = newRow.insertCell(3), + newTimeTook = newRow.insertCell(4); + + newBook.innerHTML = jsonParsed.book_title; + newAuthor.innerHTML = jsonParsed.author_name; + newDateStart.innerHTML = jsonParsed.date_started; + newDateComp.innerHTML = jsonParsed.date_comp; + newTimeTook.innerHTML = jsonParsed.time_took; + console.log("table:", table); + + console.log(json); }); - + }); + return false; - - }; - -const removeEntry = function ( e ) { - e.preventDefault() - - const book = document.querySelector( 'booknameToDelete' ) - const author = document.querySelector('authornameToDelete'), - json = { book_title: book.value, author_name: author.value}, - body = JSON.stringify( json ) - - fetch('/removeEntry', { - method:'POST', - body - }) - .then( response => response.json()) - - return false -} +}; + +const removeEntry = function (e) { + e.preventDefault(); + const book = document.querySelector("booknameToDelete"); + const author = document.querySelector("authornameToDelete"), + json = { book_title: book.value, author_name: author.value }, + body = JSON.stringify(json); + fetch("/removeEntry", { + method: "POST", + body, + }).then((response) => response.json()); + + return false; +}; + +const updateList = function (e) { + e.preventDefault(); -const updateList = function(e) { - e.preventDefault() - let libList = document.getElementById("lib"); let body = JSON.stringify(libList); console.log(body); - + fetch("/updateList", { - method: 'POST', - body - }) - .then( response => response.json()) - .then( json => { - console.log( json ) - let libList = document.getElementById("lib"); - libList.innerHTML = ""; - - json.forEach( thing => { - libList.innerHTML = libList.innerHTML + `` - }) + method: "POST", + body, }) -} - - + .then((response) => response.json()) + .then((json) => { + console.log(json); + let libList = document.getElementById("lib"); + libList.innerHTML = + ""; + + json.forEach((thing) => { + libList.innerHTML = + libList.innerHTML + + ``; + }); + }); +}; - window.onload = function () { - - const add = document.getElementById("submit"); add.onclick = submit; - + const remove = document.getElementById("remove"); remove.onclick = removeEntry; - - - }; - diff --git a/server.improved.js b/server.improved.js index 76fdbaf..9ccb627 100644 --- a/server.improved.js +++ b/server.improved.js @@ -65,23 +65,23 @@ const handlePost = function (request, response) { console.log(jsonData); //debug appdata.push(jsonData); //pushing/adding data to appdata } - - + let index = 0; let toBeRemoved = []; let needToDelete = false; // REMOVES BOOK FROM LIB appdata.forEach((entry) => { - if (jsonData.book_title == entry.book_title && jsonData.author_name == entry.author_name) { + if ( + jsonData.book_title == entry.book_title && + jsonData.author_name == entry.author_name + ) { needToDelete = true; toBeRemoved.push(index); console.log("toBeRemoved: ", toBeRemoved); - } - - else { + } else { index++; } - }) + }); if (toBeRemoved) { toBeRemoved.forEach((entryToRemove) => { appdata.splice(entryToRemove, 1); @@ -89,15 +89,12 @@ const handlePost = function (request, response) { console.log(jsonData + "2"); }); } - response.writeHead(200, "OK", { "Content-Type": "text/plain" }); response.end(JSON.stringify(appdata)); }); }; - - const sendFile = function (response, filename) { const type = mime.getType(filename);
Book
BookAuthorDate StartedDate CompletedTime Spent ReadingRemove?
${thing.bookTitle}${thing.authorName}${thing.dateStart}${thing.dateComp}${thing.timeTook}
BookAuthorDate StartedDate CompletedTime Spent ReadingRemove?
${thing.bookTitle}${thing.authorName}${thing.dateStart}${thing.dateComp}${thing.timeTook}