cs4241-22a · serena-mower23 · Sep 8, 2022 · Sep 8, 2022 · Sep 8, 2022 · Sep 8, 2022
diff --git a/.glitch-assets b/.glitch-assets
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,12 +1,12 @@
 {
-  "name": "",
-  "version": "",
-  "description": "",
-  "author": "",
+  "name": "cr-4241-a2-shortstack",
+  "version": "0.1.0",
+  "description": "WPI CS 4241 second assignment",
+  "author": "Serena Mower",
   "scripts": {
     "start": "node server.improved.js"
   },
   "dependencies": {
-    "mime": "^2.4.4"
+    "mime": "^2.6.0"
   }
 }
diff --git a/public/css/style.css b/public/css/style.css
@@ -1 +1,76 @@
-/*Style your own assignment! This is fun! */
+/*Style your own assignment! This is fun! */
+@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');
+
+body {
+  text-align: center;
+  background-color: lightblue;
+  font-family: 'Courier Prime', monospace;
+  font-size: 20px;
+}
+
+table {
+  text-align: left;
+  padding:2em;
+  color: black;
+  border: 2px solid black;
+  background-color: tan;
+  border-radius: 10px;
+}
+
+input[type=text] {
+  background:transparent;
+  border: none;
+  border-bottom: 2px solid #000000;
+}
+
+button {
+  transition-duration: 0.4s;
+  border-radius: 5px;
+  border-color: transparent;
+}
+
+button:hover {
+  background-color: darkgray;
+  color:gray;
+}
+
+.inputData {
+  margin-left: auto;
+  margin-right: auto;
+  text-align: left;
+  border-radius: 10px;
+  padding:2em;
+  color: black;
+}
+
+.description {
+  margin-top:auto;
+  margin-bottom:auto;
+  width: 50em;
+  display: inline-block;
+}
+
+.grid-container {
+  display: inline-grid
+}
+
+.bookEntry {
+  color: black;
+  border: 2px solid black;
+  padding: 5px;
+  text-align: center;
+
+}
+
+#submitButton {
+  text-align: right;
+}
+
+#currentData {
+  margin-left: auto;
+  margin-right: auto;
+  border: 20px;
+  border-collapse:collapse;
+}
+
+
diff --git a/public/index.html b/public/index.html
@@ -3,39 +3,54 @@
   <head>
     <title>CS4241 Assignment 2</title>
     <meta charset="utf-8">
+    <link rel="stylesheet" href="css/style.css">
   </head>
   <body>
-    <form action="">
-      <input type='text' id='yourname' value="your name here">
-      <button>submit</button>
-    </form>
+    <div class="grid-container">
+    <div class="description">
+      <h1>Your Little Library</h1>
+      <p>Welcome to Your Little Library! Keep track of all your books with this helpful website!</p>
+      <h2>Enter a new book here!</h2>
+    </div>
+      <form action=" " id="formElement">
+        <table class="inputData">
+          <tr>
+            <td>Title of Book:</td>
+            <td><input class="textBox" type="text" id="title" name="title" value=""></td>
+          </tr>
+          <tr>
+            <td>Author of Book:</td>
+            <td><input class="textBox" type="text" id="author" name="author" value=""></td>
+          </tr>
+          <tr>
+            <td>Date Acquired (yyyy-mm-dd):</td>
+            <td><input class="textBox" type="text" id="acquiredDate" name="acquiredDate" value=""></td>
+          </tr>
+          <tr>
+            <td>Have you read it yet? (Yes/No):</td>
+            <td><input class="textBox" type="text" id="readYet" name="readYet" value=""></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td id="submitButton"><button>Save to Library</button></td>
+          </tr>
+        </table>
+      </form>
+      <h2>Enter the Book ID of the book you wish to burn (delete):</h2>
+      <form action=" " id="deleteElement">
+        <input class="textBox" type="text" id="deleteBookID" name="deleteBookID" value="">
+        <p id="deleteButton"><button>Burn Book</button></p>
+      </form>
+      <h2>Your Bookshelf</h2>
+      <table id="currentData">
+        <tr><th class="bookEntry">Book ID</th><th class="bookEntry">Title</th><th class="bookEntry">Author</th><th class="bookEntry">Acquired Date</th><th class="bookEntry">Read Yet?</th><th class="bookEntry">Read Next Number</th></tr>
+      </table>
+    </div>
   </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 src="js/scripts.js">
   </script>
 </html>
diff --git a/public/js/scripts.js b/public/js/scripts.js
@@ -1,3 +1,83 @@
-// 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!")
+    let title = document.querySelector("#title")
+    let author = document.querySelector("#author")
+    let acquiredDate = document.querySelector("#acquiredDate")
+    let readYet = document.querySelector("#readYet")
+    let readYetString = ""
+
+    if ((readYet.value === "Yes") || (readYet.value === "yes")) {
+      readYetString = "Yes"
+    } else if ((readYet.value === "No") || (readYet.value === "no")) {
+      readYetString = "No"
+    }
+
+    let json = {
+      "bookID": "",
+      "title": title.value,
+      "author": author.value,
+      "acquiredDate": acquiredDate.value,
+      "readYet": readYetString,
+      "readNextPos": ""
+    }
+    let body = JSON.stringify(json)
+    fetch( '/submit', {
+      method:'POST',
+      body 
+    })
+    .then( async function( response ) {
+      let library = await response.json()
+      refreshLibrary(library)
+      console.log( library )
+    })
+    return false
+  }
+
+  function refreshLibrary(library) {
+    const bookshelf = document.getElementById("currentData")
+    bookshelf.innerHTML = "<tr class=\"bookEntry\"><th class=\"bookEntry\">Book ID</th><th class=\"bookEntry\">Title</th><th class=\"bookEntry\">Author</th><th class=\"bookEntry\">Acquired Date</th><th class=\"bookEntry\">Read Yet?</th><th class=\"bookEntry\">Read Next Number</th></tr>"
+
+    library.forEach((element, index) => {
+      let nonCSID = element.bookID + 1
+      let nonCSPos = element.readNextPos + 1
+      bookshelf.innerHTML +=
+        "<tr class=\"bookEntry\"><td class=\"bookEntry\">" 
+        + nonCSID + "</td><td class=\"bookEntry\">"
+        + element.title +"</td><td class=\"bookEntry\">"
+        + element.author + "</td><td class=\"bookEntry\">"
+        + element.acquiredDate + "</td><td class=\"bookEntry\">"
+        + element.readYet + "</td><td class=\"bookEntry\">"
+        + nonCSPos + "</td></tr>\n"
+    })
+  }
+
+  const deleteButton = function( e ) {
+    e.preventDefault()
+
+    let bookID = document.querySelector("#deleteBookID")
+
+    let json = {
+      "bookID": bookID.value
+    }
+
+    let body = JSON.stringify(json)
+    fetch( '/deleteButton', {
+      method:'DELETE',
+      body 
+    })
+    .then( async function( response ) {
+      let library = await response.json()
+      refreshLibrary(library)
+      console.log( library )
+    })
+    return false
+  }
+
+  window.onload = function() {
+    const button = document.getElementById( "submitButton" )
+    button.onclick = submit
+    const deleteB = document.getElementById( "deleteButton" )
+    deleteB.onclick = deleteButton
+  }