From 483ef44d5b3c9187ca15b48f90432b7f2889fbed Mon Sep 17 00:00:00 2001 From: Ryan Darcey <70971592+ryandarcey@users.noreply.github.com> Date: Thu, 8 Sep 2022 04:31:46 -0400 Subject: [PATCH 1/7] Update README.md --- README.md | 90 ------------------------------------------------------- 1 file changed, 90 deletions(-) diff --git a/README.md b/README.md index f229958..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 (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 `
+ +
+ + + + + From 92a3723996ef9f4cf80fc0a92ec2a6491c4420c4 Mon Sep 17 00:00:00 2001 From: Ryan Darcey <70971592+ryandarcey@users.noreply.github.com> Date: Thu, 8 Sep 2022 12:00:35 -0400 Subject: [PATCH 6/7] Update scripts.js --- public/js/scripts.js | 138 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 136 insertions(+), 2 deletions(-) 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) + }) + }) +} From a023ffa8089358c94595dc8f188ba350a9991446 Mon Sep 17 00:00:00 2001 From: Ryan Darcey <70971592+ryandarcey@users.noreply.github.com> Date: Thu, 8 Sep 2022 12:00:51 -0400 Subject: [PATCH 7/7] Update style.css --- public/css/style.css | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/public/css/style.css b/public/css/style.css index d5f842a..00cd0d1 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1 +1,10 @@ -/*Style your own assignment! This is fun! */ \ No newline at end of file +@import url("https://fonts.googleapis.com/css2?family=Open+Sans"); + +* { + font-family: "Open+Sans", sans-serif; + box-sizing: border-box; +} + +.header, .description { + text-align: center; +}