link to slides in read me

.vscode/settings.json

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

README.md

@@ -0,0 +1 @@
+Here are my slides: https://docs.google.com/presentation/d/1-2_fMAj9_Qx1CH1u_Ui0_uaM7g0607vvoeR2GVR1p7k/edit?usp=sharing

config/database.js

@@ -1,7 +1,10 @@
+// using mongoose to connect to our mongo database
 const mongoose = require('mongoose')
 
 const connectDB = async () => {
+  // exporting an async function
   try {
+    // db_string variable is in my env file
     const conn = await mongoose.connect(process.env.DB_STRING, {
       useNewUrlParser: true,
       useUnifiedTopology: true,

controllers/home.js

@@ -1,3 +1,5 @@
+// spitting out a object that has a method
+// getIndex renders out index.ejs - gives us our HTML
 module.exports = {
     getIndex: (req,res)=>{
         res.render('index.ejs')

controllers/todos.js

@@ -1,24 +1,36 @@
+// requiring our todo model
 const Todo = require('../models/Todo')
 
+// object is made up of five methods of CRUD
+// only thing that's talking to model
 module.exports = {
+    // get method
     getTodos: async (req,res)=>{
         try{
+            // using the Todo model to find() - don't have to db.collection.. etc etc
             const todoItems = await Todo.find()
             const itemsLeft = await Todo.countDocuments({completed: false})
+            // padding in all the Todos in our database
             res.render('todos.ejs', {todos: todoItems, left: itemsLeft})
         }catch(err){
             console.log(err)
         }
     },
+    // create method
     createTodo: async (req, res)=>{
         try{
+            // create method is like insert one
+            // create a document that has a todo property and a completed property
+            // req.body.todoItem came from the form (it has input name="todoItem")
             await Todo.create({todo: req.body.todoItem, completed: false})
             console.log('Todo has been added!')
+            // reload after it's complete -> make a get request
             res.redirect('/todos')
         }catch(err){
             console.log(err)
         }
     },
+    // update method
     markComplete: async (req, res)=>{
         try{
             await Todo.findOneAndUpdate({_id:req.body.todoIdFromJSFile},{
@@ -30,6 +42,7 @@ module.exports = {
             console.log(err)
         }
     },
+    // update method
     markIncomplete: async (req, res)=>{
         try{
             await Todo.findOneAndUpdate({_id:req.body.todoIdFromJSFile},{
@@ -41,6 +54,7 @@ module.exports = {
             console.log(err)
         }
     },
+    // delete method
     deleteTodo: async (req, res)=>{
         console.log(req.body.todoIdFromJSFile)
         try{

models/Todo.js

@@ -1,5 +1,7 @@
+// talk to db using mongoose
 const mongoose = require('mongoose')
 
+// we have schema
 const TodoSchema = new mongoose.Schema({
   todo: {
     type: String,
@@ -11,4 +13,5 @@ const TodoSchema = new mongoose.Schema({
   }
 })
 
+// exporting model
 module.exports = mongoose.model('Todo', TodoSchema)

public/js/main.js

@@ -15,6 +15,7 @@ Array.from(todoComplete).forEach((el)=>{
 })
 
 async function deleteTodo(){
+    // grab toDo from parent node (li) and it has a dataset (data-id)
     const todoId = this.parentNode.dataset.id
     try{
         const response = await fetch('todos/deleteTodo', {

routes/home.js

@@ -1,7 +1,10 @@
+// file sees the route and tells what controller to run
+// look at url and determine what controller to run!
 const express = require('express')
 const router = express.Router()
 const homeController = require('../controllers/home')
 
+// request coming in on main route and use homeController in controller file
 router.get('/', homeController.getIndex) 
 
 module.exports = router

routes/todos.js

@@ -1,7 +1,12 @@
+// file hears /todos and determines what controller to run
+// CRUD!!
+// go to todos controller
 const express = require('express')
 const router = express.Router()
 const todosController = require('../controllers/todos')
 
+// don't need /todos/getTodos -> they already know it's talking about todos
+// specific method for each CRUD request
 router.get('/', todosController.getTodos)
 
 router.post('/createTodo', todosController.createTodo)

server.js

@@ -1,21 +1,29 @@
 const express = require('express')
 const app = express()
+// no more mongo client - we have mongoose - leads to database file
 const connectDB = require('./config/database')
+// separate place for routes and this connects to it
+// routes look at the request and they figure out which controller should be handling that request 
+// controller is the middle person that talkes to database, hands off info to views for rendering
 const homeRoutes = require('./routes/home')
 const todoRoutes = require('./routes/todos')
 
 require('dotenv').config({path: './config/.env'})
 
+// use this line to connect to database - calling connectDB() from database.js
 connectDB()
 
 app.set('view engine', 'ejs')
 app.use(express.static('public'))
 app.use(express.urlencoded({ extended: true }))
 app.use(express.json())
 
+// heard a request on '/' -> go to homeRoutes
 app.use('/', homeRoutes)
+// heard a request on '/todos' -> go to todoRoutes
 app.use('/todos', todoRoutes)
 
+//port is in env file
 app.listen(process.env.PORT, ()=>{
     console.log('Server is running, you better catch it!')
 })    

views/todos.ejs

@@ -10,9 +10,18 @@
 <body>
     <h1>Todos</h1>
     <ul>
+    <!-- to dos is all the objects i got back -> loop through the array of objects
+    el is the element for the cycle of the for each
+    pull off first element to build first li and keep on going-->
+    <!-- el = each document from our database-->
     <% todos.forEach( el => { %>
+        <!-- using data-id as a data set and it's grabbing the id of the document from the database. it's unique for each item-->
+        <!-- data set is how you grab any data attribute in your db-->
         <li class='todoItem' data-id='<%=el._id%>'>
-            <span class='<%= el.completed === true ? 'completed' : 'not'%>'><%= el.todo %></span>
+            <!-- a conditional to trigger completed or not-->
+            <span class='<%= el.completed === true ? 'completed' : 'not'%>'>
+                <!-- plug in to do text-->
+                <%= el.todo %></span>
             <span class='del'> Delete </span>
         </li>
     <% }) %>