From 199f8c1da0ac2053c1c01d6bc3170d148d75e270 Mon Sep 17 00:00:00 2001 From: Caleb Talley <86822049+CalebTalley2023@users.noreply.github.com> Date: Sun, 4 Sep 2022 17:30:34 -0400 Subject: [PATCH 01/11] Made Basic List click the "+" to add to list click the "to do" item to cross it out double click the "to do" item to delete it --- README.md | 90 -------------------------------------------- public/index.html | 31 +++++++++++++-- public/js/scripts.js | 28 +++++++++++++- server.improved.js | 2 +- 4 files changed, 55 insertions(+), 96 deletions(-) diff --git a/README.md b/README.md index 9434c98..41456f5 100644 --- a/README.md +++ b/README.md @@ -1,93 +1,3 @@ -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 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 `
+ +
+diff --git a/public/js/scripts.js b/public/js/scripts.js index bf20320..1a512ab 100644 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -44,24 +44,21 @@ const submit = function( e ) { }) }) -// //json was returned from the previous ".then" -// .then( function(json){ // promise -// // why doe this happen in Chrome Dev Tools instead of the Terminal? -// ////////////// displays when using 'response.end(JSON.stringify(dataJson)) in server' -// // testing to see if you can show data to console -// console.log(json) // console logs to teh CHrome DevTools -// console.log(JSON.stringify(json)) -// console.log("do you see me in Chrome Dev Tools?" ) -// const testThen = document.querySelector("#testThen") -// testThenP = document.createElement("p") -// testThenP.innerText = JSON.stringify(json) -// testThen.appendChild(testThenP) -// ////////////// -// }) +// //json was returned from the previous ".then" + /* .then( function(json){ // promise + // why doe this happen in Chrome Dev Tools instead of the Terminal? + ////////////// displays when using 'response.end(JSON.stringify(dataJson)) in server' + // testing to see if you can show data to console + console.log(json) // console logs to teh CHrome DevTools + console.log(JSON.stringify(json)) + console.log("do you see me in Chrome Dev Tools?" ) + const testThen = document.querySelector("#testThen") + testThenP = document.createElement("p") + testThenP.innerText = JSON.stringify(json) + testThen.appendChild(testThenP) + ////////////// + })*/ /////////////// - - - return false // stops default submission behavior } // makes sure what's inside function does not run until everything on the page has loaded @@ -73,13 +70,58 @@ const submit = function( e ) { const button1 = document.querySelector( '#taskNewButton' ) button1.onclick = plus - const button2 = document.querySelector( '#ViewTasks') - button2.onclick = TaskAppData + const button2 = document.querySelector('#deleteButton') + button2.onclick = deleteTask } + const deleteTask = function( e ) { + + e.preventDefault() + + + const TaskBase = document.querySelector("#TaskBase") + + const input = document.querySelector( '#newTask' ) + const field1 = document.querySelector( '#ToDoType') + const field2 = document.querySelector('#Difficulty') + const field3= document.querySelector("#Semester") + const Year = document.querySelector("#Year"), + + json = { Task: input.value, ToDoType: field1.value, Difficulty: field2.value, Year: field3.value}, + body = JSON.stringify( json ) + fetch( '/delete', { + method:'POST', + body + }) + .then(response=> response.json()) + .then( json => { + json.forEach( item =>{ + // const p = document.createElement('p') + var p = document.createElement('p') + p.innerText = JSON.stringify(item) + + // jsonToDelete = { Task: input.value, ToDoType: field1.value, Difficulty: field2.value, Year: field3.value} + // if(JSON.stringify(item) == JSON.stringify(jsonToDelete) ){ + // p.innerText == JSON.stringify(item); + // } + // document.body.appendChild(p) + TaskBase.appendChild(p) + ////////////////// not needd below + // json1 = { Task: input.value, ToDoType: field1.value, Difficulty: field2.value, Year: field3.value}, + // jsonString = JSON.stringify( json ) + // TaskBase.forEach(para){ + // if(para ==jsonString ){ + // TaskBase.removeChild(para) + // } + // } + ///////////////// + }) + + }) +} const plus = function(e){ e.preventDefault() @@ -111,36 +153,25 @@ const submit = function( e ) { Test.appendChild(TaskTable) } - /* - get rid of old appdata when you hit submit again - */ /** Delete * get the response from the server * show all data except what is being deleted] - */ /** Results/ Update? * shows all data as is - * - * + */ /** submit/add * adds data - * - * - * + */ /* *ViewStoredTasks * gets data form server and puts it on page - /* - -const TaskAppData = function(e){ - e.preventDefault() - -}*/ \ No newline at end of file + /*/ diff --git a/server.improved.js b/server.improved.js index 2974b00..2dadcfb 100644 --- a/server.improved.js +++ b/server.improved.js @@ -55,6 +55,7 @@ const handlePost = function( request, response ) { // when I have received all of the data request.on( 'end', function() { + if ( request.url === "/submit"){ // console.log( JSON.parse( dataString ) ) // ... do something with the data here!!! dataJson = JSON.parse(dataString) @@ -63,30 +64,47 @@ const handlePost = function( request, response ) { let field3 = dataJson.Year; // Derived Field dataJson.DerivedSemester = field2 + '/' + field3 + appdata.push(dataJson) + } - // console.log(dataJson) + if ( request.url === "/delete"){ + dataJson = JSON.parse(dataString) + let field2 = dataJson.Difficulty; + let field3 = dataJson.Year; + // Derived Field + + dataJson.DerivedSemester = field2 + '/' + field3 + appdata.filter(function (f){ return f !== `${dataJson}`}) + // for (let i of appdata){ + // if (i = dataJson){ + // appdata.splice(i,i); + // } + // } + + } + console.log(dataJson) + // console.log(appdata) + // console.log(appdata) - // check to see if you can print AppData - appdata.push(dataJson) //deleting an object in appdata attempt -//////////////////////////////////////// - // function findIndexOfTask(Json){ - // for (let i of appdata){ - // if(appdata.Task == Json.Task - // && appdata.ToDoType == Json.ToDoType - // && appdata.Difficulty == Json.Difficulty - // && appdata.Year == Json.Year - // && appdata.DerivedSemester == Json.DerivedSemester){ - // i = index - // } - // return index; - // }} - // testObject = { 'model': 'honda', 'year': 2004, 'mpg': 30 } - // var index = findIndexOfTask(testObject); - // appdata.splice(index, index + 1); - // -////////////////////// - console.log(appdata) + //////////////////////////////////////// + // function findIndexOfTask(Json){ + // for (let i of appdata){ + // if(appdata.Task == Json.Task + // && appdata.ToDoType == Json.ToDoType + // && appdata.Difficulty == Json.Difficulty + // && appdata.Year == Json.Year + // && appdata.DerivedSemester == Json.DerivedSemester){ + // i = index + // } + // return index; + // }} + // testObject = { 'model': 'honda', 'year': 2004, 'mpg': 30 } + // var index = findIndexOfTask(testObject); + // appdata.splice(index, index + 1); + // + ////////////////////// + response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) //response.end(JSON.stringify(dataJson)) // sends data back to the client response.end(JSON.stringify(appdata)) // sends appdata back to the client From 3bc22f4111287dd4879e5938a65d9a1feea2940b Mon Sep 17 00:00:00 2001 From: Caleb Talley <86822049+CalebTalley2024@users.noreply.github.com> Date: Fri, 9 Sep 2022 22:57:41 -0400 Subject: [PATCH 09/11] ready for online --- public/css/style.css | 74 ++++++++++++++++++++++++++++++++++++++++---- public/index.html | 52 ++++++++++++++++++++----------- public/js/scripts.js | 71 ++++++++++++++++++++++-------------------- reference.js | 34 ++++++++++++++++++++ server.improved.js | 37 ++++++++++++++++------ 5 files changed, 200 insertions(+), 68 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index 8b53206..7f6a0a1 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,14 +1,76 @@ h1{ - color: red + color: blue; + display: flex; + justify-content: center; + + background: #9DBBF2; + border-radius:25px + } -body{ - background-color: grey; + +body { + font-family: "Alumni Sans Pinstripe", sans-serif; + font-family: "Roboto", sans-serif; + background-color: #274170; + color: #EDFAF1; + font-size: 30; + +} +#TaskBase{ + color: mintcream } -td{ - color: cyan +#text{ + color: green + } + +.inputsAndButtons{ + display: flex; +background-color: #495770; + padding: 12px ; + border: 8px; + box-sizing: border-box; + +} +#inputs{ + + flex-direction: row; + justify-content: center; + +} + +#buttons{ + + justify-content:center; + + +} + #TaskBase{ - color: indigo + background-color: #495770; + border-radius: 10px; + display:flex; + flex-direction:column; + justify-content:center; +} + +tr{ + display: flex; + flex-direction: row; + justify-content: center; + background-color: #495770; + border-radius: 2px; + padding: 5px; +} + +.guides{ + display:flex; + justify-content: center; + background-color: #426DBD; + padding: 5px; + border-radius: 5px; + + } \ No newline at end of file diff --git a/public/index.html b/public/index.html index 59869ed..2094114 100644 --- a/public/index.html +++ b/public/index.html @@ -3,6 +3,9 @@
+ + + @@ -12,8 +15,12 @@
+ To make a new task, enter in the fields below +
-| Year | DerivedSemester | -
|---|
-
+ diff --git a/public/js/scripts.js b/public/js/scripts.js index 1a512ab..74b13af 100644 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -4,6 +4,10 @@ const submit = function( e ) { // prevent default from trying to go to another page e.preventDefault() + const TaskBase = document.querySelector("#TaskBase") + // clears values on client side each time submit is pressed + TaskBase.innerText = " " + // references first with attribute inside parenthesis ( ~ to getElementById but more general ) const input = document.querySelector( '#newTask' ) const field1 = document.querySelector( '#ToDoType') @@ -24,7 +28,6 @@ const submit = function( e ) { // javascript promise: value that is unknown now, it is called when it is received by the server? // then is a callback function - .then( // when the rewsponse to the server comes, do this function( response ) { // this is the response from the server // do something with the reponse @@ -38,9 +41,9 @@ const submit = function( e ) { .then( json => { // the json.forEach( item =>{ //////////MAKE initial elements in a div clear before adding new data - const p = document.createElement('p') - p.innerText = JSON.stringify(item) - document.body.appendChild(p) + let tr = document.createElement('tr') + tr.innerText = JSON.stringify(item) + TaskBase.appendChild(tr) }) }) @@ -67,8 +70,8 @@ const submit = function( e ) { const button = document.querySelector( '#submitButton' ) button.onclick = submit - const button1 = document.querySelector( '#taskNewButton' ) - button1.onclick = plus + // const button1 = document.querySelector( '#taskNewButton' ) + // button1.onclick = plus const button2 = document.querySelector('#deleteButton') button2.onclick = deleteTask @@ -80,8 +83,8 @@ const submit = function( e ) { e.preventDefault() - const TaskBase = document.querySelector("#TaskBase") + TaskBase.innerText = " " const input = document.querySelector( '#newTask' ) @@ -100,15 +103,15 @@ const submit = function( e ) { .then( json => { json.forEach( item =>{ // const p = document.createElement('p') - var p = document.createElement('p') - p.innerText = JSON.stringify(item) + let tr = document.createElement('tr') + tr.innerText = JSON.stringify(item) // jsonToDelete = { Task: input.value, ToDoType: field1.value, Difficulty: field2.value, Year: field3.value} // if(JSON.stringify(item) == JSON.stringify(jsonToDelete) ){ // p.innerText == JSON.stringify(item); // } // document.body.appendChild(p) - TaskBase.appendChild(p) + TaskBase.appendChild(tr) ////////////////// not needd below // json1 = { Task: input.value, ToDoType: field1.value, Difficulty: field2.value, Year: field3.value}, // jsonString = JSON.stringify( json ) @@ -123,36 +126,36 @@ const submit = function( e ) { }) } - const plus = function(e){ - e.preventDefault() + // const plus = function(e){ + // e.preventDefault() - const input = document.querySelector( '#newTask' ) - const field1 = document.querySelector( '#ToDoType') - const field2 = document.querySelector('#Difficulty') - const field3= document.querySelector("#Semester") - const Year = document.querySelector("#Year") + // const input = document.querySelector( '#newTask' ) + // const field1 = document.querySelector( '#ToDoType') + // const field2 = document.querySelector('#Difficulty') + // const field3= document.querySelector("#Semester") + // const Year = document.querySelector("#Year") - // table + // // table - const Test = document.querySelector("#test") - let TaskTable = document.createElement('table') + // const Test = document.querySelector("#test") + // let TaskTable = document.createElement('table') - // TaskTable.innerText = input.value + " " + field1.value + " " + field2.value + " " + field3.value + " " + Year.value + " " - //TaskTable.innerHTML = `- To make a new task, enter in the fields below -
- -| Task | -ToDoType | -Difficulty | -Year | -DerivedSemester | +Task | +ToDoType | +Difficulty | +Year | +DerivedSemester |
|---|