add like feature

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
-    "editor.fontSize": 38,
-    "terminal.integrated.fontSize": 60
+    "editor.fontSize": 15,
+    "terminal.integrated.fontSize": 10
 }

config/.env

@@ -1,2 +1,2 @@
 PORT = 2121
-DB_STRING = mongodb+srv://demo:demo@cluster0.nfzrd.mongodb.net/todolist?retryWrites=true&w=majority
+DB_STRING = mongodb+srv://cheekygerold:database8@cluster0.5ojtsvw.mongodb.net/?retryWrites=true&w=majority

controllers/todos.js

@@ -12,7 +12,7 @@ module.exports = {
     },
     createTodo: async (req, res)=>{
         try{
-            await Todo.create({todo: req.body.todoItem, completed: false})
+            await Todo.create({todo: req.body.todoItem, completed: false, likes:0})
             console.log('Todo has been added!')
             res.redirect('/todos')
         }catch(err){
@@ -50,5 +50,16 @@ module.exports = {
         }catch(err){
             console.log(err)
         }
+    },
+    addLike: async (req,res)=>{
+        try {
+            await Todo.findOneAndUpdate({_id:req.body.todoIdFromJSFile},{
+                likes: +req.body.likesFromJSFile + 1
+            })
+            console.log('Added Like');
+            res.json('Added Like')      
+        } catch (err) {
+            console.log(err)
+        }
     }
 }    

models/Todo.js

@@ -8,6 +8,10 @@ const TodoSchema = new mongoose.Schema({
   completed: {
     type: Boolean,
     required: true,
+  },
+  likes:{
+    type: Number,
+    required:true,
   }
 })
 

public/js/main.js

@@ -1,6 +1,7 @@
 const deleteBtn = document.querySelectorAll('.del')
 const todoItem = document.querySelectorAll('span.not')
 const todoComplete = document.querySelectorAll('span.completed')
+const likeItem = document.querySelectorAll('.like')
 
 Array.from(deleteBtn).forEach((el)=>{
     el.addEventListener('click', deleteTodo)
@@ -14,6 +15,30 @@ Array.from(todoComplete).forEach((el)=>{
     el.addEventListener('click', markIncomplete)
 })
 
+Array.from(likeItem).forEach((el)=>{
+    el.addEventListener('click', addLike)
+})
+
+async function addLike(){
+    const todoId = this.parentNode.dataset.id
+    const likeId = this.parentNode.dataset.likes
+    try{
+        const response = await fetch('todos/addLike', {
+            method: 'put',
+            headers: {'Content-type': 'application/json'},
+            body: JSON.stringify({
+                'todoIdFromJSFile': todoId,
+                'likesFromJSFile' : likeId,
+            })
+        })
+        const data = await response.json()
+        console.log(data)
+        location.reload()
+    }catch(err){
+        console.log(err)
+    }
+}
+
 async function deleteTodo(){
     const todoId = this.parentNode.dataset.id
     try{

routes/todos.js

@@ -10,6 +10,8 @@ router.put('/markComplete', todosController.markComplete)
 
 router.put('/markIncomplete', todosController.markIncomplete)
 
+router.put('/addLike', todosController.addLike)
+
 router.delete('/deleteTodo', todosController.deleteTodo)
 
 module.exports = router

views/todos.ejs

@@ -11,10 +11,13 @@
     <h1>Todos</h1>
     <ul>
     <% todos.forEach( el => { %>
-        <li class='todoItem' data-id='<%=el._id%>'>
+        <li class='todoItem' data-id='<%=el._id%>' data-likes="<%=el.likes%>">
             <span class='<%= el.completed === true ? 'completed' : 'not'%>'><%= el.todo %></span>
             <span class='del'> Delete </span>
+            <span><%= el.likes %></span>
+            <span class = 'like'>Like</span>
         </li>
+
     <% }) %>    
     </ul>