diff --git a/README.md b/README.md index 996cf12d..3c81edfd 100644 --- a/README.md +++ b/README.md @@ -1,97 +1,17 @@ -Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js -=== +## Assignment Tracker +Link: https://a2-jmckeen8.glitch.me/ -Due: September 9th, by 11:59 AM. +This website allows users to keep track of assignments for courses. It allows them to specify the course and assignment name, when it's due, the method through which it's turned in (Canvas, Email, etc.). It also has a derived field based off of the due date and the current date that tells the user how many days they have left to work on the assignment. The website displays the upcoming assignments in a table, and when the user has finished the assignment they can click the "Done!" button to remove the assignment from the list. -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 `` tag for this, but `
+ + + + + + + + + + + + +
Course NameAssignment NameDue dateDays leftSubmission TypeDescriptionTurned In?
- + diff --git a/public/js/scripts.js b/public/js/scripts.js index de052eae..1b70b9d1 100644 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -1,3 +1,111 @@ // 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!") + +const submit = function( e ) { + // prevent default form action from being carried out + e.preventDefault() + + + const json = {} + json["courseName"] = document.getElementById("courseName").value + json["assignmentName"] = document.getElementById("assignmentName").value + json["dueDate"] = document.getElementById("dueDate").value + json["submissionType"] = document.getElementById("submissionType").value + json["description"] = document.getElementById("description").value + + const body = JSON.stringify( json ) + + fetch( '/submit', { + method:'POST', + body + }) + .then( function( response ) { + return response.json() + }).then(function(data){ + console.log(data) + buildTable(data) + }) + + + + return false +} + +function doneAssignment(num){ + const json = {} + json["removeAssignment"] = num + + const body = JSON.stringify(json) + + fetch( '/submit', { + method:'POST', + body + }) + .then( function( response ) { + return response.json() + }).then(function(data){ + console.log(data) + buildTable(data) + }) +} + + + +function buildTable(data){ + document.getElementById('assignmentTableBody').innerHTML=""; //clear table body only, will repopulate with fresh data + + for(let i = 0; i < data.length; i++){ + let newRow = document.createElement('tr'); + + let courseName = document.createTextNode(data[i].courseName) + let newData = document.createElement('td'); + newData.append(courseName); + newRow.append(newData); + + let assignmentName = document.createTextNode(data[i].assignmentName) + newData = document.createElement('td'); + newData.append(assignmentName); + newRow.append(newData); + + let rawDueDate = data[i].dueDate; + let dateObj = new Date(rawDueDate) + let dueDate = document.createTextNode(dateObj.toLocaleString('en-US')); + newData = document.createElement('td'); + newData.append(dueDate); + newRow.append(newData); + + let daysLeft = document.createTextNode(data[i].daysLeft) + newData = document.createElement('td'); + newData.append(daysLeft); + newRow.append(newData); + + let submissionType = document.createTextNode(data[i].submissionType) + newData = document.createElement('td'); + newData.append(submissionType); + newRow.append(newData); + + let description = document.createTextNode(data[i].description) + newData = document.createElement('td'); + newData.append(description); + newRow.append(newData); + + let turnedIn = document.createElement('button'); + turnedIn.setAttribute("type", "button") + turnedIn.onclick = () => {this.doneAssignment(i)} + turnedIn.innerHTML = "Done!" + turnedIn.id = "turnedInButton" + i; + newData = document.createElement('td'); + newData.append(turnedIn); + newRow.append(newData); + + let tableBody = document.getElementById('assignmentTableBody'); + tableBody.append(newRow); + + } +} + +window.onload = function() { + const submitButton = document.getElementById( 'formSubmit' ) + submitButton.onclick = submit +} \ No newline at end of file diff --git a/server.improved.js b/server.improved.js index 26673fc0..3c5c6877 100644 --- a/server.improved.js +++ b/server.improved.js @@ -6,11 +6,7 @@ const http = require( 'http' ), 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 appdata = [] const server = http.createServer( function( request,response ) { if( request.method === 'GET' ) { @@ -38,11 +34,32 @@ const handlePost = function( request, response ) { }) request.on( 'end', function() { - console.log( JSON.parse( dataString ) ) - // ... do something with the data here!!! + let parsedInput = JSON.parse(dataString) - response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) + //if portion runs if we're trying to get rid of one of the assignments + if(Object.keys(parsedInput).length === 1){ + let assignmentToRemove = parsedInput.removeAssignment; + appdata.splice(assignmentToRemove, 1); + } + //else we're trying to add a new assignment to the table + else{ + //time manipulation + let providedDuedate = new Date(parsedInput.dueDate); + let today = new Date(); + let diffTime = providedDuedate-today; + let diffDays = Math.ceil(diffTime / (1000*60*60*24)) - 1; + + parsedInput["daysLeft"] = diffDays; + + appdata.push(parsedInput) + } + + console.log(appdata) + + response.statusCode = 200; + response.setHeader('Content-Type', 'application/json'); + response.write(JSON.stringify(appdata)) response.end() }) }