mlshax · mlshax · Sep 17, 2020 · Sep 17, 2020 · Sep 17, 2020
diff --git a/.glitch-assets b/.glitch-assets
diff --git a/package.json b/package.json
@@ -1,12 +1,12 @@
 {
-  "name": "",
-  "version": "",
-  "description": "",
-  "author": "",
+  "name": "TODO",
+  "version": "1.0",
+  "description": "A Simple TODO List Application",
+  "author": "Malek ElShakhs",
   "scripts": {
     "start": "node server.improved.js"
   },
   "dependencies": {
-    "mime": "^2.4.4"
+    "mime": "^2.4.6"
   }
 }
diff --git a/public/css/style.css b/public/css/style.css
@@ -1 +1,34 @@
-/*Style your own assignment! This is fun! */
+body{
+  font-family: 'Lato', sans-serif;
+}
+form{
+  display: flex;
+  justify-content: center;
+}
+input{
+  margin-right: 10px;
+  font-family: 'Lato', sans-serif;
+}
+li{
+  margin: 5px;
+  display: flex;
+}
+task, date, due{
+  width: 25%
+}
+priority{
+  width: 20%
+}
+p{
+  margin-right: 36px; 
+}
+.deleteButton{
+  background-color: #E97451;
+}
+#submitButton{
+  background-color: #AEB7FD;
+}
+#titles{
+  display: flex;
+  justify-content: left;
+}
diff --git a/public/index.html b/public/index.html
@@ -1,41 +1,24 @@
 <!doctype html>
+<link rel="stylesheet" href="css/style.css">
+<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
 <html lang="en">
   <head>
     <title>CS4241 Assignment 2</title>
     <meta charset="utf-8">
+    <script src="js/scripts.js"></script>
   </head>
   <body>
     <form action="">
-      <input type='text' id='yourname' value="your name here">
-      <button>submit</button>
+      <input type="text" id="task" value="" placeholder="task name">
+      <input type="text" id="priority" value="" placeholder="priority (low number = high)">
+      <button id="submitButton">Add Task</button>
     </form>
+    <ul id="titles">
+      <p>Task Name</p>
+      <p>Priority</p>
+      <p>Start Date</p>
+      <p>Finish By</p>
+    </ul>
+    <ul id="taskList"></ul>
   </body>
-  <script>
-
-  const submit = function( e ) {
-    // prevent default form action from being carried out
-    e.preventDefault()
-
-    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
-  }
-
-  window.onload = function() {
-    const button = document.querySelector( 'button' )
-    button.onclick = submit
-  }
-
-  </script>
 </html>
diff --git a/public/js/scripts.js b/public/js/scripts.js
@@ -1,3 +1,146 @@
 // Add some Javascript code here, to run on the front end.
 
-console.log("Welcome to assignment 2!")
+console.log("Welcome to assignment 2!")
+
+var todos = []
+
+const updateData = function(e){
+  console.log('Getting')
+
+  fetch( '/appData', {
+    method: 'GET'
+  })
+  .then( function( response ) {
+
+    return (response.json())
+
+  }).then(function(data) {
+
+    todos = data;
+    console.log(todos);
+    document.querySelector('#taskList').innerHTML = '';
+    todos.forEach(
+      element => document.querySelector('#taskList').innerHTML += 
+      '<li><task>' + element.task + '</task><priority>' + element.priority + 
+      '</priority><date>' + element.date + '</date><due>' + element.due + '</due>' +
+      '<button onclick=\'deleteTask(event)\' class=\'deleteButton\'>Delete</button</li>'
+    );
+  })
+
+  return false
+}
+
+const submitTask = function( e ) {
+  // prevent default form action from being carried out
+  e.preventDefault()
+
+  var today = new Date();
+  var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
+
+  const taskInput = document.querySelector( '#task' )
+  const priorityInput = document.querySelector('#priority')
+
+  var dueDate = new Date();
+  dueDate.setDate(dueDate.getDate() + parseInt(priorityInput.value))
+  var due = dueDate.getFullYear()+'-'+(dueDate.getMonth()+1)+'-'+dueDate.getDate(),
+
+  json = { task: taskInput.value , priority: priorityInput.value, date: date, due: due},
+  body = JSON.stringify( json )
+
+  fetch( '/submit', {
+    method:'POST',
+    body
+  })
+  .then( function( response ) {
+
+    return (response.json())
+
+  }).then(function(data) {
+
+    todos = data;
+    console.log(todos);
+    document.querySelector('#taskList').innerHTML = '';
+    todos.forEach(
+      element => document.querySelector('#taskList').innerHTML += 
+      '<li><task>' + element.task + '</task><priority>' + element.priority + 
+      '</priority><date>' + element.date + '</date><due>' + element.due + '</due>' +
+      '<button onclick=\'deleteTask(event)\' class=\'deleteButton\'>Delete</button</li>'
+    );
+  })
+
+  return false
+}
+
+function deleteTask(event) {
+
+  var item = event.target.parentElement
+
+  var eTask = item.getElementsByTagName("task")[0].innerHTML
+  var ePriority = item.getElementsByTagName("priority")[0].innerHTML
+  var eDate = item.getElementsByTagName("date")[0].innerHTML
+  var eDue = item.getElementsByTagName("due")[0].innerHTML
+
+  var json = { task: eTask , priority: ePriority, date: eDate , due: eDue}
+  var body = JSON.stringify(json)
+
+  console.log(body)
+
+  fetch( '/delete', {
+    method:'POST',
+    body
+  })
+  .then( function( response ) {
+
+    return (response.json())
+
+  }).then(function(data) {
+
+    todos = data;
+    console.log(todos);
+    document.querySelector('#taskList').innerHTML = '';
+    todos.forEach(
+      element => document.querySelector('#taskList').innerHTML += 
+      '<li><task>' + element.task + '</task><priority>' + element.priority + 
+      '</priority><date>' + element.date + '</date><due>' + element.due + '</due>' +
+      '<button onclick=\'deleteTask(event)\' class=\'deleteButton\'>Delete</button</li>'
+    );
+  })
+}
+
+/*const deleteTask = function (e) {
+  console.log('Delete Task')
+
+  var task = e.target.parentElement
+
+  var json = { task: task.getElementsByTagName("task") , priority: task.getElementsByTagName("priority"), 
+              date: task.getElementsByTagName("date"), due: task.getElementsByTagName("due")}
+  var body = JSON.stringify(task)
+
+  fetch( '/delete', {
+    method:'POST',
+    body
+  })
+  .then( function( response ) {
+
+    return (response.json())
+
+  }).then(function(data) {
+
+    todos = data;
+    console.log(todos);
+    document.querySelector('#taskList').innerHTML = '';
+    todos.forEach(
+      element => document.querySelector('#taskList').innerHTML += 
+      '<li><task>' + element.task + '</task><priority>' + element.priority + 
+      '</priority><date>' + element.date + '</date><due>' + element.due + '</due>' +
+      '<button onclick=\'deleteTask(event)\' class=\'deleteButton\'>Delete</button</li>'
+    );
+  })
+
+}*/
+
+window.onload = function() {
+  updateData()
+  const button = document.querySelector( '#submitButton' )
+  button.onclick = submitTask
+}
diff --git a/server.improved.js b/server.improved.js
@@ -7,9 +7,7 @@ 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} 
+  {'task': 'Example Task', 'priority': '2', 'date': '2020-9-16', 'due': '2020-9-18'}
 ]
 
 const server = http.createServer( function( request,response ) {
@@ -25,26 +23,72 @@ const handleGet = function( request, response ) {
 
   if( request.url === '/' ) {
     sendFile( response, 'public/index.html' )
+  }
+  else if(request.url === '/appData'){
+    console.log('Sending: ' + appdata)
+    response.write(JSON.stringify(appdata));
+    response.end();
   }else{
     sendFile( response, filename )
   }
 }
 
 const handlePost = function( request, response ) {
-  let dataString = ''
+  if(request.url === '/submit') {
+    let dataString = ''
+
+    request.on( 'data', function( data ) {
+        dataString += data 
+    })
+
+    request.on( 'end', function() {
+      console.log('Data in Server: ')
+      console.log( JSON.parse( dataString ) )
 
-  request.on( 'data', function( data ) {
-      dataString += data 
-  })
+      appdata[appdata.length] = JSON.parse(dataString);
 
-  request.on( 'end', function() {
-    console.log( JSON.parse( dataString ) )
+      // ... do something with the data here!!
 
-    // ... do something with the data here!!!
+      var data = JSON.stringify(appdata);
+      console.log('Sending: ' + appdata);
 
-    response.writeHead( 200, "OK", {'Content-Type': 'text/plain' })
-    response.end()
-  })
+      response.writeHead( 200, "OK", {'Content-Type': 'text/plain' })
+      response.write(data)
+      console.log(data)
+      response.end()
+    })
+  }
+  else if(request.url === '/delete') {
+    console.log('Delete')
+    let dataString = ''
+
+    request.on( 'data', function( data ) {
+        dataString += data 
+    })
+
+    request.on( 'end', function() {
+      var data = JSON.parse(dataString)
+
+      var index = -1;
+      for(var i = 0; i < appdata.length; i++) {
+        if(appdata[i].task == data.task && appdata[i].priority == data.priority
+          && appdata[i].date == data.date && appdata[i].due == data.due) {
+          index = i;
+          break;
+        }
+      }
+      appdata.splice(index, 1)
+
+      var data = JSON.stringify(appdata);
+      console.log('Sending: ' + appdata);
+
+      response.writeHead( 200, "OK", {'Content-Type': 'text/plain' })
+      response.write(data)
+      console.log(data)
+      response.end()
+    })
+
+  }
 }
 
 const sendFile = function( response, filename ) {

diff --git a/shrinkwrap.yaml b/shrinkwrap.yaml
@@ -0,0 +1,15 @@
+dependencies:
+  mime: 2.4.6
+packages:
+  /mime/2.4.6:
+    dev: false
+    engines:
+      node: '>=4.0.0'
+    hasBin: true
+    resolution:
+      integrity: sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA==
+registry: 'https://registry.npmjs.org/'
+shrinkwrapMinorVersion: 9
+shrinkwrapVersion: 3
+specifiers:
+  mime: ^2.4.4