diff --git a/.vscode/settings.json b/.vscode/settings.json index c3c81b8b..cb217272 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,4 @@ { - "editor.fontSize": 42, - "terminal.integrated.fontSize": 62 + "editor.fontSize": 16, + "terminal.integrated.fontSize": 16 } \ No newline at end of file diff --git a/public/js/main.js b/public/js/main.js index ff0eac39..6bcfd0be 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -1,72 +1,72 @@ -const deleteBtn = document.querySelectorAll('.fa-trash') -const item = document.querySelectorAll('.item span') -const itemCompleted = document.querySelectorAll('.item span.completed') +const deleteBtn = document.querySelectorAll('.fa-trash') //creates a deleteBtn variable and sets it all buttons with the class .fa-trash button +const item = document.querySelectorAll('.item span') //creates a item variable and sets it to all span with the class .item span +const itemCompleted = document.querySelectorAll('.item span.completed') //creates a itemCompleted variable and sets it to all span with the class .completed span -Array.from(deleteBtn).forEach((element)=>{ - element.addEventListener('click', deleteItem) +Array.from(deleteBtn).forEach((element)=>{ //creates an array of deleteBtn and loops through each button + element.addEventListener('click', deleteItem) //adds an EventListener to each deleteBtn }) -Array.from(item).forEach((element)=>{ - element.addEventListener('click', markComplete) +Array.from(item).forEach((element)=>{ //creates an array of item and loops through each item + element.addEventListener('click', markComplete) //adds an EventListener to each item }) -Array.from(itemCompleted).forEach((element)=>{ - element.addEventListener('click', markUnComplete) +Array.from(itemCompleted).forEach((element)=>{ //creates an array of itemCompleted and loops through each itemCompleted + element.addEventListener('click', markUnComplete) //adds an EventListener to each item }) -async function deleteItem(){ - const itemText = this.parentNode.childNodes[1].innerText +async function deleteItem(){ //deletes an item + const itemText = this.parentNode.childNodes[1].innerText //creates a itemText and sets it equal to the span text try{ - const response = await fetch('deleteItem', { - method: 'delete', - headers: {'Content-Type': 'application/json'}, - body: JSON.stringify({ - 'itemFromJS': itemText + const response = await fetch('deleteItem', { //creates a variable function a waits for the server to get the data with a fetch request + method: 'delete', //calls the delete methed to delete a item + headers: {'Content-Type': 'application/json'}, //tells what type of content we're sending + body: JSON.stringify({ //covents the JS object to JSON string data + 'itemFromJS': itemText //sends the itemText that contains text to the server side }) }) - const data = await response.json() - console.log(data) - location.reload() + const data = await response.json() //a data variable to get the response json that todo item is deleted + console.log(data) //console log the data that it got from the delete method + location.reload() //reload the page }catch(err){ - console.log(err) + console.log(err) //notify an error if delete method fail } } -async function markComplete(){ - const itemText = this.parentNode.childNodes[1].innerText +async function markComplete(){ //set the todo item to true to mark task as complete + const itemText = this.parentNode.childNodes[1].innerText //creats a variable and sets it equal to span text try{ - const response = await fetch('markComplete', { - method: 'put', - headers: {'Content-Type': 'application/json'}, - body: JSON.stringify({ - 'itemFromJS': itemText + const response = await fetch('markComplete', { //creates a variable function a waits for the server to get the data with a fetch request + method: 'put', //calls a put request to update todo item + headers: {'Content-Type': 'application/json'}, //tell what type of content we're sending + body: JSON.stringify({ //covents the JS object to JSON string data + 'itemFromJS': itemText //sends the itemText that contains text to the server side }) }) - const data = await response.json() - console.log(data) - location.reload() + const data = await response.json() //a data variable to get the response json that todo item is updated to true + console.log(data) //console log the data that it got from the put method + location.reload() //reload the page }catch(err){ - console.log(err) + console.log(err) //notify error if method fail } } -async function markUnComplete(){ - const itemText = this.parentNode.childNodes[1].innerText +async function markUnComplete(){ //change the status todo item to false as uncomplete + const itemText = this.parentNode.childNodes[1].innerText //creates a variable and sets it equal to span text try{ - const response = await fetch('markUnComplete', { - method: 'put', - headers: {'Content-Type': 'application/json'}, - body: JSON.stringify({ - 'itemFromJS': itemText + const response = await fetch('markUnComplete', { //creates a variable function a waits for the server to get the data with a fetch request + method: 'put', //calls a put request to update todo item + headers: {'Content-Type': 'application/json'}, //tells what type of data we're sending + body: JSON.stringify({ //covents the JS object to JSON string data + 'itemFromJS': itemText //sends the itemText that contains text to the server side }) }) - const data = await response.json() - console.log(data) - location.reload() + const data = await response.json() //a data variable to get the response json that todo item is updated to false + console.log(data) //console log the data that it got from the put method + location.reload() //reload the page }catch(err){ - console.log(err) + console.log(err) //notify an error if method fail } } \ No newline at end of file diff --git a/server.js b/server.js index 58b53e2f..b1635fa3 100644 --- a/server.js +++ b/server.js @@ -1,30 +1,30 @@ -const express = require('express') -const app = express() -const MongoClient = require('mongodb').MongoClient -const PORT = 2121 -require('dotenv').config() +const express = require('express') //imports express in node.js +const app = express() //calls the express to create an app for application +const MongoClient = require('mongodb').MongoClient //imports mongodb in node.js +const PORT = 2121 //sets up port number for app to listen +require('dotenv').config() // command that loads environment variables from .env file into process.env. separate the sensitive data from code and stored them securely outside the source code -let db, - dbConnectionStr = process.env.DB_STRING, - dbName = 'todo' +let db, //sets up a database variable + dbConnectionStr = process.env.DB_STRING, //create a varialbe and set to database key from mongodb + dbName = 'todo' //created database name and set it to 'todo' -MongoClient.connect(dbConnectionStr, { useUnifiedTopology: true }) +MongoClient.connect(dbConnectionStr, { useUnifiedTopology: true }) //connects tha database to mongodb .then(client => { - console.log(`Connected to ${dbName} Database`) - db = client.db(dbName) + console.log(`Connected to ${dbName} Database`) //tells user that 'todo' is connected to the database + db = client.db(dbName) //sets db to hold the collection of todos }) -app.set('view engine', 'ejs') -app.use(express.static('public')) -app.use(express.urlencoded({ extended: true })) -app.use(express.json()) +app.set('view engine', 'ejs') //sets ejs as templet language +app.use(express.static('public')) //connects to public folder and loads all the files that are inside +app.use(express.urlencoded({ extended: true }))//secure data code +app.use(express.json()) //goes to the data and gets the body text and convert it to JS object -app.get('/',async (request, response)=>{ - const todoItems = await db.collection('todos').find().toArray() - const itemsLeft = await db.collection('todos').countDocuments({completed: false}) - response.render('index.ejs', { items: todoItems, left: itemsLeft }) +app.get('/',async (request, response)=>{ //gets the path that is requesting + const todoItems = await db.collection('todos').find().toArray() //Goes to the todos database, goes inside the collection, grabs all the documents and put them an a array + const itemsLeft = await db.collection('todos').countDocuments({completed: false}) //Goes to the todos database, goes inside the collection, and counts all the documents that has completed set in false + response.render('index.ejs', { items: todoItems, left: itemsLeft }) //data is put in the ejs templete and response them with ejs // db.collection('todos').find().toArray() // .then(data => { // db.collection('todos').countDocuments({completed: false}) @@ -35,59 +35,59 @@ app.get('/',async (request, response)=>{ // .catch(error => console.error(error)) }) -app.post('/addTodo', (request, response) => { - db.collection('todos').insertOne({thing: request.body.todoItem, completed: false}) +app.post('/addTodo', (request, response) => { //goes to the form that has the action of addTodo and gets the text that contains item and add it to the todos database + db.collection('todos').insertOne({thing: request.body.todoItem, completed: false}) //Goes to the todos database, goes inside the collection and adds a new todo item to the collection and set completed to false .then(result => { - console.log('Todo Added') - response.redirect('/') + console.log('Todo Added') //lets user know that a new todo item is added to the database + response.redirect('/') //Let user know that it went okay and reloads the page and makes a get request that grabs all the todo items including the new one that was just added }) - .catch(error => console.error(error)) + .catch(error => console.error(error)) //notify an error if fail to procces a post request }) -app.put('/markComplete', (request, response) => { - db.collection('todos').updateOne({thing: request.body.itemFromJS},{ +app.put('/markComplete', (request, response) => { //updates an existing todo item + db.collection('todos').updateOne({thing: request.body.itemFromJS},{ //Goes to the todos database, goes inside the collection and updates the todo item that is looking for $set: { - completed: true + completed: true //set completed from false to true } },{ - sort: {_id: -1}, - upsert: false + sort: {_id: -1}, //sorts the todo items from top to bottom and finds the first item its looking for and update it + upsert: false //does not create a new todo item if item does not exist }) .then(result => { - console.log('Marked Complete') - response.json('Marked Complete') + console.log('Marked Complete') //let user know that update has been complete + response.json('Marked Complete') //response that everything went okay and todo item is completed }) - .catch(error => console.error(error)) + .catch(error => console.error(error)) //notify an error if fail to update }) -app.put('/markUnComplete', (request, response) => { - db.collection('todos').updateOne({thing: request.body.itemFromJS},{ +app.put('/markUnComplete', (request, response) => { //updates an existing todo item + db.collection('todos').updateOne({thing: request.body.itemFromJS},{ //Goes to the todos database, goes inside the collection and updates the todo item that is looking for $set: { - completed: false + completed: false //update the status completed from true to false } },{ - sort: {_id: -1}, - upsert: false + sort: {_id: -1}, //sorts the todo items from top to bottom and finds the first item its looking for and update it + upsert: false //does not create a new todo item if item does not exist }) .then(result => { - console.log('Marked Complete') - response.json('Marked Complete') + console.log('Marked Complete') //let user know that update is complete + response.json('Marked Complete') //response user that it went okay and updates the todo item }) - .catch(error => console.error(error)) + .catch(error => console.error(error)) //notify if an error occur if fail to update }) -app.delete('/deleteItem', (request, response) => { - db.collection('todos').deleteOne({thing: request.body.itemFromJS}) +app.delete('/deleteItem', (request, response) => { //deletes a todo item + db.collection('todos').deleteOne({thing: request.body.itemFromJS}) //Goes to the todos database, goes inside the collection and deletes the item that is looking for .then(result => { - console.log('Todo Deleted') - response.json('Todo Deleted') + console.log('Todo Deleted') //let user know that the todo item is deleted + response.json('Todo Deleted') //response user that it went okay and deletes the todo item }) - .catch(error => console.error(error)) + .catch(error => console.error(error)) //notify if an error occur if fail to delete }) -app.listen(process.env.PORT || PORT, ()=>{ - console.log(`Server running on port ${PORT}`) +app.listen(process.env.PORT || PORT, ()=>{ //listen for the PORT number to run the server + console.log(`Server running on port ${PORT}`) //let user know server is up and running }) \ No newline at end of file diff --git a/views/index.ejs b/views/index.ejs index a26617ae..efa76ac2 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -20,12 +20,12 @@

Todo List: