Answer

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.env

package.json

@@ -0,0 +1,31 @@
+{
+  "name": "simple-express-app-submission",
+  "version": "1.0.0",
+  "description": "- Fork and clone this repo\r - Create a new branch called answer\r - Checkout answer branch\r - Push to your fork\r - Issue a pull request\r - Your pull request description should contain the following:\r   - (1 to 5 no 3) I completed the challenge\r   - (1 to 5 no 3) I feel good about my code\r   - Anything specific on which you want feedback!",
+  "main": "server.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "nodemon server.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sean-poole/simple-express-app-submission.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/sean-poole/simple-express-app-submission/issues"
+  },
+  "homepage": "https://github.com/sean-poole/simple-express-app-submission#readme",
+  "dependencies": {
+    "body-parser": "^1.20.1",
+    "cors": "^2.8.5",
+    "dotenv": "^16.0.3",
+    "ejs": "^3.1.8",
+    "express": "^4.18.2",
+    "mongodb": "^4.13.0"
+  },
+  "devDependencies": {
+    "nodemon": "^2.0.20"
+  }
+}

public/css/style.css

@@ -0,0 +1,4 @@
+.completed {
+    color: gray;
+    text-decoration: line-through;
+}

public/js/main.js

@@ -0,0 +1,72 @@
+const deleteBtn = document.querySelectorAll(".fa-trash");
+const show = document.querySelectorAll(".show span");
+const showCompleted = document.querySelectorAll(".show span.completed");
+
+Array.from(deleteBtn).forEach(element => {
+    element.addEventListener("click", deleteShow);
+});
+
+Array.from(show).forEach(element => {
+    element.addEventListener("click", markComplete);
+});
+
+Array.from(showCompleted).forEach(element => {
+    element.addEventListener("click", markIncomplete);
+});
+
+async function deleteShow() {
+    const showText = this.parentNode.childNodes[1].innerText;
+    try {
+        const response = await fetch("deleteShow", {
+            method: "delete",
+            headers: { "Content-Type": "application/json"},
+            body: JSON.stringify({
+                "itemFromJS": showText
+            })
+        })
+
+        const data = await response.json();
+        console.log(data);
+        location.reload();
+    } catch(error) {
+        console.log(`Error: ${error}`);
+    }
+}
+
+async function markComplete() {
+    const showText = this.parentNode.childNodes[1].innerText;
+    try {
+        const response = await fetch("markComplete", {
+            method: "put",
+            headers: {"Content-Type" : "application/json"},
+            body: JSON.stringify({
+                "itemFromJS": showText
+            })
+        })
+
+        const data = await response.json();
+        console.log(data);
+        location.reload();
+    } catch(error) {
+        console.log(`Error: ${error}`);
+    }
+}
+
+async function markIncomplete() {
+    const showText = this.parentNode.childNodes[1].innerText;
+    try {
+        const response = await fetch("markIncomplete", {
+            method: "put",
+            headers: {"Content-Type": "application/json"},
+            body: JSON.stringify({
+                "itemFromJS": showText
+            })
+        })
+
+        const data = await response.json();
+        console.log(data);
+        location.reload();
+    } catch(error) {
+        console.log(`Error: ${error}`);
+    }
+}

server.js

@@ -0,0 +1,78 @@
+const express = require("express");
+const app = express();
+const bodyParser = require("body-parser");
+const { response } = require("express");
+const MongoClient = require("mongodb").MongoClient;
+require("dotenv").config();
+
+const PORT = process.env.PORT || 8000;
+const connectionString = process.env.DB_STRING;
+
+app.use(bodyParser.urlencoded({ extended: true }));
+app.use(bodyParser.json());
+app.use(express.static("public"));
+app.set("view engine", "ejs");
+
+let db,
+    dbConnection = process.env.DB_STRING,
+    dbName = "anime-watch-list";
+
+MongoClient.connect(dbConnection, { useUnifiedTopology: true })
+    .then(client => {
+        console.log(`Connected to ${dbName} database`);
+        db = client.db(dbName);
+    });
+
+app.get("/", async (request, response) => {
+    const showList = await db.collection("shows").find().toArray();
+    const showsLeft = await db.collection("shows").countDocuments({ completed: false });
+    response.render("index.ejs", { shows: showList, left: showsLeft });
+});
+
+app.post("/addShow", (request, response) => {
+    db.collection("shows").insertOne({ thing: request.body.showItem, completed: false })
+    .then(result => {
+        console.log("Show added");
+        response.redirect("/");
+    })
+    .catch(error => console.log(`error: ${error}`));
+});
+
+app.put("/markComplete", (request, response) => {
+    db.collection("shows").updateOne( {thing: request.body.itemFromJS }, {
+        $set: {
+            completed: true
+        }
+    })
+    .then(result => {
+        console.log("Show complete");
+        response.json("Show complete");
+    })
+    .catch(error => console.log(`error: ${error}`));
+});
+
+app.put("/markIncomplete", (request, respopnse) => {
+    db.collection("shows").updateOne({ thing: request.body.itemFromJS }, {
+        $set: {
+            completed: false
+        }
+    })
+    .then(result => {
+        console.log("Show incomplete");
+        response.json("Show incomplete");
+    })
+    .catch(error => console.log(`error: ${error}`));
+});
+
+app.delete("/deleteShow", (request, response) => {
+    db.collection("shows").deleteOne({ thing: request.body.itemFromJS })
+    .then(result => {
+        console.log("Show deleted");
+        response.json("Show deleted");
+    })
+    .catch(error => console.log(`error: ${error}`));
+});
+
+app.listen(process.env.PORT || PORT, () => {
+    console.log(`Server is running on port ${PORT}`);
+});

views/index.ejs

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <title>Document</title>
+
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+        <link rel="stylesheet" href="css/style.css">
+    </head>
+    <body>
+        <h1>Anime Watch List: </h1>
+        <ul class="showList">
+        <% for (let i = 0; i < shows.length; i++) {%>
+            <li class="show">
+            <% if(shows[i].completed === true) {%>
+                <span class="completed"><%= shows[i].thing %></span>
+            <% }else{ %>
+                <span><%= shows[i].thing %></span>
+            <% } %>
+                <span class="fa fa-trash"></span>
+            </li>  
+        <% } %>    
+        </ul>
+
+        <h2>Shows left: <%= left %></h2>
+
+        <h2>Add a show: </h2>
+
+        <form action="/addShow" method="POST">
+            <input type="text" name="showItem">
+            <input type="submit">
+        </form>
+
+        <script src="js/main.js"></script>
+    </body>
+</html>