next atep

public/main.js

@@ -0,0 +1,19 @@
+const update = document.querySelector('#update-button');
+
+update.addEventListener('click', _ => {
+    fetch('/quotes', {
+        method: 'put',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+            name: 'Marcus',
+            quotes: 'Ich bin ein Zitat5454!'
+        })
+    })
+        .then(res => {
+            if (res.ok) return res.json();
+        })
+        .then(response => {
+            window.location.reload(true);
+        })
+
+})

server.js

@@ -22,6 +22,7 @@ MongoClient.connect(mongoDb, (err, client) => {
 
     /* Express requests */
     app.use(bodyParser.urlencoded({ extended: true }));
+    app.use(bodyParser.json());
 
     /* Creating the Server*/
     app.listen(4000, function () {
@@ -56,4 +57,22 @@ MongoClient.connect(mongoDb, (err, client) => {
 
     })
 
+    /* Update */
+    app.put('/quotes', (req, res) => {
+        quotesCollection.findOneAndUpdate(
+            { name: 'Marcus' },
+            {
+                $set: {
+                    name: req.body.name,
+                    quotes: req.body.quotes
+                }
+            },
+            {
+                upsert: true
+            }
+        )
+            .then(result => res.json('Success'))
+            .catch(error => console.error(error))
+    })
+
 })

views/index.ejs

@@ -35,6 +35,23 @@
             </li>
             <% } %>
     </ul>
+    <div>
+        <h2>Darth Vadar invades!</h2>
+        <p>
+            Replace first Yoda's quote with a quote written by Darth Vadar
+        </p>
+        <button id="update-button">Replace Yoda's quote</button>
+    </div>
+
+    <div>
+        <h2>Remove Darth Vadar!</h2>
+        <p>
+            Delete one Darth Vadar's quote. Does nothing if there are no more Darth
+            Vadar's quote
+        </p>
+        <button id="delete-button">Delete Darth Vadar's quote</button>
+    </div>
+    <script src="/main.js"></script>
 </body>
 
 </html>