adding readme file with link to MVC todo list slides

.vscode/settings.json

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

README.md

@@ -0,0 +1,2 @@
+<!-- link to google slides for this; btw it's terrible -->
+https://docs.google.com/presentation/d/1Cg_2NfeqC5IbGclz1ncdVGGt5QCWY-szBBnrArqH3xU/edit?usp=sharing 

config/database.js

@@ -1,18 +1,20 @@
 const mongoose = require('mongoose')
 
-const connectDB = async () => {
-  try {
-    const conn = await mongoose.connect(process.env.DB_STRING, {
-      useNewUrlParser: true,
-      useUnifiedTopology: true,
-      useFindAndModify: false,
-    })
+//db string is in env file that needs to be created; mongoose used to connect to mongoDB
+//connectDB is exporting function and being called in server.js as 'connectDB()'
+const connectDB = async() => {
+    try {
+        const conn = await mongoose.connect(process.env.DB_STRING, {
+            useNewUrlParser: true,
+            useUnifiedTopology: true,
+            useFindAndModify: false,
+        })
 
-    console.log(`MongoDB Connected: ${conn.connection.host}`)
-  } catch (err) {
-    console.error(err)
-    process.exit(1)
-  }
+        console.log(`MongoDB Connected: ${conn.connection.host}`)
+    } catch (err) {
+        console.error(err)
+        process.exit(1)
+    }
 }
 
-module.exports = connectDB
+module.exports = connectDB

controllers/home.js

@@ -1,5 +1,7 @@
+//sent from home.js main route b/c '/'; uses this home.js controller because told to; object with a method; 
 module.exports = {
-    getIndex: (req,res)=>{
+    //renders out index ejs file (html) and responds with it
+    getIndex: (req, res) => {
         res.render('index.ejs')
     }
 }

controllers/todos.js

@@ -1,54 +1,58 @@
 const Todo = require('../models/Todo')
 
+//methods talking to model listed above; 
 module.exports = {
-    getTodos: async (req,res)=>{
-        try{
+    getTodos: async(req, res) => {
+        try {
+            //finds all documents by using todo model (look at top to see where); using mongoose don't have to clarify using an array
             const todoItems = await Todo.find()
-            const itemsLeft = await Todo.countDocuments({completed: false})
-            res.render('todos.ejs', {todos: todoItems, left: itemsLeft})
-        }catch(err){
+            const itemsLeft = await Todo.countDocuments({ completed: false })
+                //render ejs to spit out html and respond with it
+            res.render('todos.ejs', { todos: todoItems, left: itemsLeft })
+        } catch (err) {
             console.log(err)
         }
     },
-    createTodo: async (req, res)=>{
-        try{
-            await Todo.create({todo: req.body.todoItem, completed: false})
+    createTodo: async(req, res) => {
+        try {
+            //req.body.todoitem is from form and reloads with res.redirect '/'
+            await Todo.create({ todo: req.body.todoItem, completed: false })
             console.log('Todo has been added!')
             res.redirect('/todos')
-        }catch(err){
+        } catch (err) {
             console.log(err)
         }
     },
-    markComplete: async (req, res)=>{
-        try{
-            await Todo.findOneAndUpdate({_id:req.body.todoIdFromJSFile},{
+    markComplete: async(req, res) => {
+        try {
+            await Todo.findOneAndUpdate({ _id: req.body.todoIdFromJSFile }, {
                 completed: true
             })
             console.log('Marked Complete')
             res.json('Marked Complete')
-        }catch(err){
+        } catch (err) {
             console.log(err)
         }
     },
-    markIncomplete: async (req, res)=>{
-        try{
-            await Todo.findOneAndUpdate({_id:req.body.todoIdFromJSFile},{
+    markIncomplete: async(req, res) => {
+        try {
+            await Todo.findOneAndUpdate({ _id: req.body.todoIdFromJSFile }, {
                 completed: false
             })
             console.log('Marked Incomplete')
             res.json('Marked Incomplete')
-        }catch(err){
+        } catch (err) {
             console.log(err)
         }
     },
-    deleteTodo: async (req, res)=>{
+    deleteTodo: async(req, res) => {
         console.log(req.body.todoIdFromJSFile)
-        try{
-            await Todo.findOneAndDelete({_id:req.body.todoIdFromJSFile})
+        try {
+            await Todo.findOneAndDelete({ _id: req.body.todoIdFromJSFile })
             console.log('Deleted Todo')
             res.json('Deleted It')
-        }catch(err){
+        } catch (err) {
             console.log(err)
         }
     }
-}    
+}

models/Todo.js

@@ -1,14 +1,15 @@
 const mongoose = require('mongoose')
 
+//schema to follow
 const TodoSchema = new mongoose.Schema({
-  todo: {
-    type: String,
-    required: true,
-  },
-  completed: {
-    type: Boolean,
-    required: true,
-  }
+    todo: {
+        type: String,
+        required: true,
+    },
+    completed: {
+        type: Boolean,
+        required: true,
+    }
 })
 
-module.exports = mongoose.model('Todo', TodoSchema)
+module.exports = mongoose.model('Todo', TodoSchema)

routes/home.js

@@ -2,6 +2,8 @@ const express = require('express')
 const router = express.Router()
 const homeController = require('../controllers/home')
 
-router.get('/', homeController.getIndex) 
+//sees route and tells which controller to use; here using home controller;
+//main route because '/'; sends to home.js controller;
+router.get('/', homeController.getIndex)
 
 module.exports = router

server.js

@@ -1,10 +1,11 @@
 const express = require('express')
 const app = express()
 const connectDB = require('./config/database')
+    //routes named as const; look at request and see which controller to use
 const homeRoutes = require('./routes/home')
 const todoRoutes = require('./routes/todos')
 
-require('dotenv').config({path: './config/.env'})
+require('dotenv').config({ path: './config/.env' })
 
 connectDB()
 
@@ -13,9 +14,10 @@ app.use(express.static('public'))
 app.use(express.urlencoded({ extended: true }))
 app.use(express.json())
 
+//routes to use (and then links to it's own file in routes folder)
 app.use('/', homeRoutes)
 app.use('/todos', todoRoutes)
- 
-app.listen(process.env.PORT, ()=>{
+
+app.listen(process.env.PORT, () => {
     console.log('Server is running, you better catch it!')
-})    
+})

views/todos.ejs

@@ -1,24 +1,29 @@
 <!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="css/style.css">
 </head>
+
 <body>
     <h1>Todos</h1>
     <ul>
-    <% todos.forEach( el => { %>
-        <li class='todoItem' data-id='<%=el._id%>'>
-            <span class='<%= el.completed === true ? 'completed' : 'not'%>'><%= el.todo %></span>
-            <span class='del'> Delete </span>
-        </li>
-    <% }) %>    
+        <!-- this section is part of the delete button and it's parent node is used  -->
+        <% todos.forEach( el => { %>
+            <li class='todoItem' data-id='<%=el._id%>'>
+                <span class='<%= el.completed === true ? ' completed ' : 'not '%>'><%= el.todo %></span>
+                <span class='del'> Delete </span>
+            </li>
+            <% }) %>
     </ul>
 
-    <h2>Things left to do: <%= left %></h2>
+    <h2>Things left to do:
+        <%= left %>
+    </h2>
 
     <form action="/todos/createTodo" method='POST'>
         <input type="text" placeholder="Enter Todo Item" name='todoItem'>
@@ -27,4 +32,5 @@
 
     <script src="js/main.js"></script>
 </body>
+
 </html>