update,

james_endl-js-commission/app/public/javascripts/externalJS.js

@@ -0,0 +1,109 @@
+$(document).ready(function() {
+    showAllTopics()
+});
+
+
+// step 7.2
+function showAllTopics() {
+  var table_content = `
+        <tr>
+            <th>Topic Name</th>
+            <th>Study Hour</th>
+            <th>Chosen Status</th>
+            <th>Operation</th>
+        </tr>
+    `;
+
+  $.getJSON("/users/get_table", function (data) {
+    $.each(data, function () {
+      // 1. for each row tag, add the attribute class=“highlight” if the status field of the topic is “yes”
+
+      // 2. the last <td> element contains an <a> element with text “add” or “remove”
+      //    (if status field equals to “yes”, text should be “remove”; otherwise, text should be “add”)
+
+      // 3. The table row representations should be all concatenated into the string table_content.
+      table_content += `
+          <tr ${this.status == "yes" ? 'class="highlight"' : ""}>
+            <td>${this.name}</td>
+            <td>${this.hour}</td>
+            <td>${this.status}</td>
+            <td>
+              ${
+                this.status == "yes"
+                  ? `<a  href="#" class="operation" rel="${this._id}" >remove</a>`
+                  : `<a  href="#" class="operation" rel="${this._id}" >add</a>`
+              }
+            </td>
+          </tr>`;
+    });
+
+    // Finally, use $(‘#plan_table’).html() to set HTML content of the table element of id “plan_table” to table_content.
+    $("#plan_table").html(table_content);
+  });
+}
+
+// step 8.2
+function operateTopic(event) {
+  // event.preventDefault() to prevent opening the link “#” when the hyperlink is clicked
+  event.preventDefault();
+
+  // retrieve _id of the topic that you are going to add/remove from the ‘rel’ attribute using $(this).attr(‘rel’)
+  var _id = $(this).attr("rel");
+
+  // use $.ajax() to send a HTTP PUT request for “/users/update_status” with JSON data
+  // {_id: _id field retrieved, op: operation retrieved};
+  $.ajax({
+    type: "PUT",
+    url: `/users/update_status`,
+    data: {
+      _id: _id,
+      // retrieve the operation that your are going to perform using $(this).html().
+      op: $(this).html(),
+    },
+    dataType: "JSON",
+  }).done(function (response) {
+    if (response.msg === "Successfully updated!") {
+      // alert the response message and call showAllTopics() to refresh the topic table.
+      alert("Successfully updated!");
+
+      // call showAllTopics() to refresh the topic table.
+      showAllTopics();
+    } else {
+      alert(response.msg);
+    }
+  });
+}
+
+$("#plan_table").on("click", ".operation", operateTopic);
+
+
+// step 9.2
+function deleteTopic(event) {
+  event.preventDefault();
+
+  var topic_name = $("#input_name").val();
+
+  // check if the topic_name is valid
+  if ($(`td:contains("${topic_name}")`).length > 0) {
+    // If the length of the list is not 0, use $.ajax() to send a HTTP DELETE request for “/users/delete_topic/:topic_name”;
+    $.ajax({
+      type: "DELETE",
+      url: `/users/delete_topic/${topic_name}`,
+    }).done(function (res) {
+      if (res.msg == "Successfully deleted!") {
+        // success delete,
+        // 1. call showAllTopics() to refresh the topic table.
+        // 2. alert response message
+        showAllTopics();
+        alert(res.msg);
+      }
+      // clear after delete operation
+      $("#input_name").val("");
+    });
+  } else {
+    // alert the message “No such topic in the table!”
+    alert("No such topic in the table!");
+  }
+}
+
+$("#submit_delete").on('click', deleteTopic)

james_endl-js-commission/app/public/stylesheets/style.css

@@ -0,0 +1,159 @@
+body {
+  margin: 0;
+  background: #163a50;
+  font: 300 100%/120% "Tahoma", Arial, Helvetica, sans-serif;
+}
+
+header {
+  overflow: hidden;
+}
+
+header, nav, .contents, footer {
+  box-sizing: border-box;
+  max-width: 1080px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+header, nav, footer {
+  background: #0f2736;
+}
+
+h1, h2, h3, h4 {
+  font-weight: bold
+}
+
+.contents {
+  padding: 1em 2em 2.5em 2em;
+}
+
+/* increase line spacing for main title */
+h1 {
+  line-height: 120%;
+  margin-top: 0.5em;
+  float: left;
+  width: auto;
+}
+
+header img {
+  float: left;
+}
+
+/* change color and remove underline for links */
+footer a {
+  color: inherit;
+  text-decoration: none;
+}
+
+#plan_table a {
+  color: rgb(0, 47, 255);
+}
+
+/* size and margin for logo image */
+header img {
+  max-width: 100%;
+  max-height: 100%;
+  margin: 0.5em;
+}
+
+form {
+  padding: 1em 2em;
+}
+
+input[type="number"] {
+  min-width: 4em;
+}
+
+/* style for footer */
+footer {
+  margin: auto;
+  text-align: center;
+}
+
+footer div {
+  padding: 1em;
+}
+
+.contents h2 {
+  text-align: center;
+}
+
+button {
+  margin-top: 1em;
+  margin-bottom: 1em;
+  width: 5em;
+  height: 2em;
+}
+
+input {
+  width: 5em;
+  height: 1.6em;
+  margin-right: 2em;
+}
+
+#delete_div p{
+  color: gray;
+}
+
+
+header *, nav * {
+  color: #FFFFFF;
+}
+
+.contents {
+  background: #FFFFFF;
+}
+
+.subtitle {
+  font-size: 0.6em;
+  font-weight: normal;
+}
+
+@media screen and (max-width: 1080px) {
+  header,nav {
+      overflow: hidden;
+  }
+}
+
+@media screen and (max-width: 720px) {
+  header img {
+      display: none;
+  }
+  header h1 {
+      padding: 0 0.5em;
+  }
+  nav div {
+      width: 100%;
+  }
+}
+
+.contents {
+  text-align: center;
+}
+
+.contents li{
+  text-align: left;
+}
+
+/* style for the table */
+table, th, td {
+  border: 1.8px solid black;
+  border-collapse: collapse;
+  text-align: center;
+  vertical-align: center;
+  margin: auto;
+  width: 400px;
+  height: 50px;
+}
+
+th {
+  background-color: rgb(178, 177, 177);
+}
+
+.highlight {
+  background-color: rgb(255, 0, 0);
+}
+
+#plan_table {
+  margin-bottom: 2em;
+}

james_endl-js-commission/app/public/stylesheets/style.js

@@ -0,0 +1,159 @@
+body {
+    margin: 0;
+    background: #163a50;
+    font: 300 100%/120% "Tahoma", Arial, Helvetica, sans-serif;
+}
+
+header {
+    overflow: hidden;
+}
+
+header, nav, .contents, footer {
+    box-sizing: border-box;
+    max-width: 1080px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+header, nav, footer {
+    background: #0f2736;
+}
+
+h1, h2, h3, h4 {
+    font-weight: bold
+}
+
+.contents {
+    padding: 1em 2em 2.5em 2em;
+}
+
+/* increase line spacing for main title */
+h1 {
+    line-height: 120%;
+    margin-top: 0.5em;
+    float: left;
+    width: auto;
+}
+
+header img {
+    float: left;
+}
+
+/* change color and remove underline for links */
+footer a {
+    color: inherit;
+    text-decoration: none;
+}
+
+#plan_table a {
+    color: rgb(0, 47, 255);
+}
+
+/* size and margin for logo image */
+header img {
+    max-width: 100%;
+    max-height: 100%;
+    margin: 0.5em;
+}
+
+form {
+    padding: 1em 2em;
+}
+
+input[type="number"] {
+    min-width: 4em;
+}
+
+/* style for footer */
+footer {
+    margin: auto;
+    text-align: center;
+}
+
+footer div {
+    padding: 1em;
+}
+
+.contents h2 {
+    text-align: center;
+}
+
+button {
+    margin-top: 1em;
+    margin-bottom: 1em;
+    width: 5em;
+    height: 2em;
+}
+
+input {
+    width: 5em;
+    height: 1.6em;
+    margin-right: 2em;
+}
+
+#delete_div p{
+    color: gray;
+}
+
+
+header *, nav * {
+    color: #FFFFFF;
+}
+
+.contents {
+    background: #FFFFFF;
+}
+
+.subtitle {
+    font-size: 0.6em;
+    font-weight: normal;
+}
+
+@media screen and (max-width: 1080px) {
+    header,nav {
+        overflow: hidden;
+    }
+}
+
+@media screen and (max-width: 720px) {
+    header img {
+        display: none;
+    }
+    header h1 {
+        padding: 0 0.5em;
+    }
+    nav div {
+        width: 100%;
+    }
+}
+
+.contents {
+    text-align: center;
+}
+
+.contents li{
+    text-align: left;
+}
+
+/* style for the table */
+table, th, td {
+    border: 1.8px solid black;
+    border-collapse: collapse;
+    text-align: center;
+    vertical-align: center;
+    margin: auto;
+    width: 400px;
+    height: 50px;
+}
+
+th {
+    background-color: rgb(178, 177, 177);
+}
+
+.highlight {
+    background-color: rgb(255, 0, 0);
+}
+
+#plan_table {
+    margin-bottom: 2em;
+}