diff --git a/.glitch-assets b/.glitch-assets new file mode 100644 index 0000000..e69de29 diff --git a/README.md b/README.md index f229958..8cf0c8a 100644 --- a/README.md +++ b/README.md @@ -1,98 +1,20 @@ -Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js -=== -Due: September 8th, by 11:59 AM. +## Mary Barsoum To Do List +a2-barsoumrose.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. +For my project I made a very basic to do list. The user is able to input the item to do, a category for the item, a due date using the datetime-local input type, and a priority. based on the priority level, a reaction will be given. -Baseline Requirements ---- +for this project I was unable to implement the delete button. The HTML has been validated. -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 `
+ + + + + + + + + + + + + + + + + + + +
To Do
Category
Due Date
Item Priority
+ - - - + + + + \ No newline at end of file diff --git a/public/js/scripts.js b/public/js/scripts.js index de052ea..d937581 100644 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -1,3 +1,61 @@ -// Add some Javascript code here, to run on the front end. +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 + let item = document.querySelector('#item') + let category= document.querySelector('#category') + let data = document.querySelector('#data') + let priority = document.querySelector('#priority') + + let json = { + item: item.value, + category: category.value, + data: data.value, + priority: priority.value, + reaction: "" + } + + let body = JSON.stringify(json) + + fetch( '/submit', { + method:'POST', + body, + }) + + .then( async function ( response ) { + // do something with the reponse + let newData = await response.json() + reload(newData); + + console.log(newData) + }) + + + return false + } + + function reload(newData) { + const table = document.getElementById("results") + table.innerHTML = "To DoCategoryDue DateItem PriorityReaction" + + + newData.forEach((element, index) => { + table.innerHTML += "" + + element.item + + "" + + element.category + + "" + + element.data + + "" + + element.priority + + "" + + element.reaction + + "" + + }) + } + + window.onload = function() { + const button = document.querySelector( 'button' ) + button.onclick = submit + } diff --git a/server.improved.js b/server.improved.js index 26673fc..72af18a 100644 --- a/server.improved.js +++ b/server.improved.js @@ -7,9 +7,6 @@ const http = require( 'http' ), 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 ) { @@ -42,8 +39,23 @@ const handlePost = function( request, response ) { // ... do something with the data here!!! + let entry = JSON.parse( dataString) + if (entry.priority == '1'){ + entry.reaction = ':)' + } + else if(entry.priority == '2'){ + entry.reaction = ':/' + } + else(entry.reaction = ':(') + + console.log(entry) + appdata.push(entry) + + + response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) - response.end() + console.log(appdata) + response.end(JSON.stringify(appdata)) }) } diff --git a/tempCodeRunnerFile.js b/tempCodeRunnerFile.js new file mode 100644 index 0000000..e69de29