cs4241-21a · lilygarfinkel · Sep 7, 2021 · Sep 7, 2021 · Sep 7, 2021 · Sep 7, 2021
diff --git a/package.json b/package.json
@@ -1,12 +1,25 @@
 {
-  "name": "",
+  "name": "a2-lil",
   "version": "",
-  "description": "",
+  "description": "Assignment 2",
   "author": "",
   "scripts": {
     "start": "node server.improved.js"
   },
   "dependencies": {
-    "mime": "^2.4.4"
-  }
+    "body-parser": "^1.19.0",
+    "express": "^4.17.1",
+    "mime": "^2.4.6"
+  },
+  "main": "server.improved.js",
+  "devDependencies": {},
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lilygarfinkel/a2-shortstack.git"
+  },
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/lilygarfinkel/a2-shortstack/issues"
+  },
+  "homepage": "https://github.com/lilygarfinkel/a2-shortstack#readme"
 }
diff --git a/public/css/style.css b/public/css/style.css
diff --git a/public/index.html b/public/index.html
@@ -1,41 +1,172 @@
+
 <!doctype html>
 <html lang="en">
   <head>
     <title>CS4241 Assignment 2</title>
     <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
+    <script src="scripts.js"></script>
   </head>
-  <body>
-    <form action="">
-      <input type='text' id='yourname' value="your name here">
-      <button>submit</button>
-    </form>
-  </body>
+    <body>
+      <div class="flex-container">
+          <h1>
+            Assignment Tracker
+          </h1>
+          <form action="" name="form1" method="POST">
+
+            <div class="form">
+              <label for="assignment">Assignment:</label><br> 
+              <input class="inputs" type="text" id="assignment" value="Assignment"><br>
+              <label for="priority">Priority:</label><br> 
+              <input class="inputs" type="text" id="priority" value="Priority"><br>
+              <label for="deadline">Deadline:</label><br>
+              <input class="inputs" type="text" id="deadline" value="Deadline">
+              <div class="buttons" id="action" name="action">
+                <input id="add" value="add" type="submit">
+                <input id="done" value="delete" type="submit">
+                <input id="edit" value="edit" type="submit">
+            </div>
+          </div>
+            <br>
+
+          </form>
+
+      <br>
+      <table id="tableOne">
+        <tr>
+          <td>Assignment</td>
+          <td>Priority</td>
+          <td>Deadline</td>
+        </tr>
+      </table>
+    </div>
+</body>
   <script>
 
-  const submit = function( e ) {
-    // prevent default form action from being carried out
+  var AssignArr = ["CS4241 A2", "CS4123 HW2"]
+  var PriorArr = ["high", "low"]
+  var DeadlineArr = ["Thursday", "Sunday"]
+
+  function addToTable(AssignArr, PriorArr, DeadlineArr) {
+
+    const table = document.getElementById("tableOne");
+
+  let length = AssignArr.length;
+
+
+
+  var rows = table.rows;
+  var i = rows.length;
+  while (--i) {
+    rows[i].parentNode.removeChild(rows[i]);
+  }
+
+  for (x = 0; x < length; x++) {
+
+    let row = table.insertRow(x+1);
+
+    var cell1 = row.insertCell(0);
+    var cell2 = row.insertCell(1);
+    var cell3 = row.insertCell(2);
+
+    cell1.innerText = AssignArr[x];
+    cell2.innerText = PriorArr[x];
+    cell3.innerText = DeadlineArr[x];
+
+  }
+
+}
+
+const submit = function( e ) {
     e.preventDefault()
 
-    const input = document.querySelector( '#yourname' ),
-          json = { yourname: input.value },
-          body = JSON.stringify( json )
+    const assignInput = document.querySelector('#assignment'),
+          priorityInput = document.querySelector('#priority'),
+          deadlineInput = document.querySelector('#deadline'),
+          addInput = document.querySelector('#add'),
+          editInput = document.querySelector('#edit'),
+          deleteInput = document.querySelector('#delete')
+
+    var json;
+    var body;
+
+    if(addInput) {
+      json = {action: "add", assignment: assignInput.value, priority: priorityInput.value, deadline: deadlineInput.value}
+      body = JSON.stringify(json)
+    }
 
-    fetch( '/submit', {
+    else if(editInput) {
+      json = {action: "edit", assignment: assignInput.value, priority: priorityInput.value, deadline: deadlineInput.value}
+
+      body = JSON.stringify(json)
+    }
+
+    else {
+      json = {action: "delete", assignment: assignInput.value, priority: priorityInput.value, deadline: deadlineInput.value}
+      body = JSON.stringify(json)
+    }
+    console.log(JSON.stringify(json))
+    fetch('/submit', {
       method:'POST',
-      body 
+      body
     })
     .then( function( response ) {
-      // do something with the reponse 
-      console.log( response )
-    })
+
+      data = response.json();
+
+      return data    
+    }).then( function(data){
+
+      AssignArr = []
+      PriorArr = []
+      DeadlineArr = [] 
+
+      dataLength = data.length
+
+      for(let i = 0; i < dataLength; i++) {
+
+        AssignArr.push(data[i].assignment)
+        PriorArr.push(data[i].priority)
+        DeadlineArr.push(data[i].deadline)
+
+
+        addToTable(AssignArr, PriorArr, DeadlineArr)
+
+      }
+
 
+    })
+
     return false
   }
 
+
   window.onload = function() {
-    const button = document.querySelector( 'button' )
-    button.onclick = submit
+    const button = document.querySelector( '#add' )
+      button.onclick = submit
+    const button2 = document.querySelector( '#delete' )
+      button2.onclick = submit
+    const button3 = document.querySelector( '#edit' )
+      button3.onclick = submit
+
   }
 
+  function waitForLoad(id, callback){
+    var timer = setInterval(function(){
+        if(document.getElementById(id)){
+            clearInterval(timer);
+            callback();
+        }
+    }, 100);
+}
+
+waitForLoad("subm", function(){
+    console.log("load successful, you can proceed!!");
+    document.getElementById("subm").onclick = function()
+    {
+        alert("I got clicked");
+    }
+});
   </script>
 </html>
diff --git a/public/style.css b/public/style.css
@@ -0,0 +1,10 @@
+body
+{
+  background-color: #fff4e8;
+}
+
+h1 
+{ 
+  color: #fc7f03;
+  font-size: 24pt;
+}
diff --git a/server.improved.js b/server.improved.js
@@ -7,10 +7,9 @@ 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} 
-]
+  { Assignment: "CS4241 A2", Priority: "high", Deadline: "Thursday" },
+  { Assignment: "CS4123 HW2", Priority: "low", Deadline: "Sunday" }
+];
 
 const server = http.createServer( function( request,response ) {
   if( request.method === 'GET' ) {
@@ -38,14 +37,64 @@ const handlePost = function( request, response ) {
   })
 
   request.on( 'end', function() {
+
+    var jsonData = JSON.parse(dataString); 
+
     console.log( JSON.parse( dataString ) )
 
-    // ... do something with the data here!!!
+       let action = jsonData.action;
+
+    if (action.includes("add")) {
+      let assignment = jsonData.assignment;
+      let prior = jsonData.priority;
+      let deadline = jsonData.deadline;
+      let entries = {};
+      entries["Assignment"] = assignment;
+      entries["Priority"] = priority;
+      entries["Deadline"] = deadline;
+
+      appdata.push(entries);
+    }
+
+
+    if (action.includes("edit")) {
+      let assignment = jsonData.assignment;
+      let prior = jsonData.priority;
+      let deadline = jsonData.deadline;
+      let entries2 = {};
+      entries2["Assignment"] = assignment;
+      entries2["Priority"] = priority;
+      entries2["Deadline"] = deadline;
+
+      appdata(newEntries).push(newEntries);
+    }
+
+
+    if (action.includes("delete")) {
+      let assignment = jsonData.assignment;
+      let prior = jsonData.priority;
+      let deadline = jsonData.deadline;
+      let entries = {};
+      entries["Assignment"] = assignment;
+      entries["Priority"] = priority;
+      entries["Deadline"] = deadline;
+
+      appdata.splice(entries);
+    }
+
+
+    var sendingJSON = [];
+    for (let newEntry in appdata) {
+      sendingJSON.push(appdata[newEntry]);
+    }
+
+    console.log(sendingJSON);
+  });
+
 
     response.writeHead( 200, "OK", {'Content-Type': 'text/plain' })
     response.end()
-  })
-}
+  };
 
 const sendFile = function( response, filename ) {
    const type = mime.getType( filename ) 
@@ -66,7 +115,7 @@ const sendFile = function( response, filename ) {
        response.end( '404 Error: File Not Found' )
 
      }
-   })
-}
+   });
+};
 
 server.listen( process.env.PORT || port )