From 5409331c2f9936b3adc24e5183e36cea3b2e8498 Mon Sep 17 00:00:00 2001 From: BarreraClaudia Date: Fri, 19 Jul 2024 13:16:22 -0600 Subject: [PATCH] added comments --- .vscode/settings.json | 8 ++--- public/js/main.js | 68 ++++++++++++++++++----------------- server.js | 82 +++++++++++++++++++++---------------------- views/index.ejs | 14 +++----- 4 files changed, 85 insertions(+), 87 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index c3c81b8b..2fdfc6cf 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,4 @@ -{ - "editor.fontSize": 42, - "terminal.integrated.fontSize": 62 -} \ No newline at end of file +// { +// "editor.fontSize": 42, +// "terminal.integrated.fontSize": 62 +// } \ No newline at end of file diff --git a/public/js/main.js b/public/js/main.js index ff0eac39..e7f34c3e 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -1,72 +1,76 @@ -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') // variable for elements with trash can +const item = document.querySelectorAll('.item span') // variable for items +const itemCompleted = document.querySelectorAll('.item span.completed') // variable for items marked as completed +// event listeners for delete requests Array.from(deleteBtn).forEach((element)=>{ element.addEventListener('click', deleteItem) }) - +// event listeners for PUT requests /markCompleted Array.from(item).forEach((element)=>{ element.addEventListener('click', markComplete) }) - +// event listeners for PUT requests /markUnComplete Array.from(itemCompleted).forEach((element)=>{ element.addEventListener('click', markUnComplete) }) +// delete request async function deleteItem(){ - const itemText = this.parentNode.childNodes[1].innerText + const itemText = this.parentNode.childNodes[1].innerText // text from the span try{ - const response = await fetch('deleteItem', { - method: 'delete', - headers: {'Content-Type': 'application/json'}, - body: JSON.stringify({ - 'itemFromJS': itemText + const response = await fetch('deleteItem', { // making a request to server, route is /deleteItem + method: 'delete', // set method to delete + headers: {'Content-Type': 'application/json'}, // tells server to expect JSON + body: JSON.stringify({ // convert object into JSON string + 'itemFromJS': itemText // setting content of body to the variable declared above, naming it 'itemFromJS' }) }) - const data = await response.json() + const data = await response.json() // returns a promise resolved to a JSON object console.log(data) - location.reload() + location.reload() // refreshes page }catch(err){ - console.log(err) + console.log(err) // if there is an error it will be shown in the console } } +// PUT request async function markComplete(){ - const itemText = this.parentNode.childNodes[1].innerText + const itemText = this.parentNode.childNodes[1].innerText // text from the span try{ - const response = await fetch('markComplete', { - method: 'put', - headers: {'Content-Type': 'application/json'}, - body: JSON.stringify({ - 'itemFromJS': itemText + const response = await fetch('markComplete', { // making a request to server, route /markComplete + method: 'put', // method set to put (update) + headers: {'Content-Type': 'application/json'}, // tells server to expect JSON + body: JSON.stringify({ // convert object into JSON string + 'itemFromJS': itemText // setting content of body to the variable declared above, naming it 'itemFromJS' }) }) - const data = await response.json() + const data = await response.json() // returns a promise resolved to a JSON console.log(data) - location.reload() + location.reload() // refreshes page }catch(err){ - console.log(err) + console.log(err) // if there is an error it will be shown in the console } } +// PUT request async function markUnComplete(){ - const itemText = this.parentNode.childNodes[1].innerText + const itemText = this.parentNode.childNodes[1].innerText // text from the span try{ - const response = await fetch('markUnComplete', { - method: 'put', - headers: {'Content-Type': 'application/json'}, - body: JSON.stringify({ - 'itemFromJS': itemText + const response = await fetch('markUnComplete', { // making a request to server, route /markUnComplete + method: 'put', // method set to put (update) + headers: {'Content-Type': 'application/json'}, // tells server to expect JSON + body: JSON.stringify({ // convert object into JSON string + 'itemFromJS': itemText // setting content of body to the variable declared above, naming it 'itemFromJS' }) }) - const data = await response.json() + const data = await response.json() // returns a promise resolved to a JSON console.log(data) - location.reload() + location.reload() // refreshes page }catch(err){ - console.log(err) + console.log(err) // if there is an error it will be shown in the console } } \ No newline at end of file diff --git a/server.js b/server.js index 58b53e2f..a203cb13 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') // requiring Express +const app = express() // calling Express +const MongoClient = require('mongodb').MongoClient // requiring MongoDB +const PORT = 2121 // port in local host +require('dotenv').config() // enables .env file -let db, - dbConnectionStr = process.env.DB_STRING, - dbName = 'todo' +let db, // declaring an empty 'db' variable (database) + dbConnectionStr = process.env.DB_STRING, // database connection string from .env + dbName = 'todo' // name of the database +// connecting to the database MongoClient.connect(dbConnectionStr, { useUnifiedTopology: true }) .then(client => { console.log(`Connected to ${dbName} Database`) db = client.db(dbName) }) -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') // setting up templating language as EJS +app.use(express.static('public')) // setting up the public folder for static pages +app.use(express.urlencoded({ extended: true })) // used to parse incoming requests with URL-encoded data (data submitted via HTML form). the parsed URL-encoded data is accessible through req.body +app.use(express.json()) // enables JSON parsing for incoming requests. the parsed JSON data is accessible through req.body - -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)=>{ // get request for main page + const todoItems = await db.collection('todos').find().toArray() // all the documents in the 'todo' collection in an array + const itemsLeft = await db.collection('todos').countDocuments({completed: false}) // the number of documents with completed value of false + response.render('index.ejs', { items: todoItems, left: itemsLeft }) // sending the variables todoItems and itsmeLeft to 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) => { // route comes from action on HTML form + db.collection('todos').insertOne({thing: request.body.todoItem, completed: false}) // adds a document into the 'todo' collection .then(result => { - console.log('Todo Added') - response.redirect('/') + console.log('Todo Added') // msg in terminal + response.redirect('/') // refreshes page }) - .catch(error => console.error(error)) + .catch(error => console.error(error)) // if there is an error it will be shown in terminal }) -app.put('/markComplete', (request, response) => { +app.put('/markComplete', (request, response) => { // route comes from main.js function db.collection('todos').updateOne({thing: request.body.itemFromJS},{ $set: { - completed: true + completed: true // updates to true } },{ - sort: {_id: -1}, + sort: {_id: -1}, // grabs the first one if there are several upsert: false }) .then(result => { - console.log('Marked Complete') - response.json('Marked Complete') + console.log('Marked Complete') // msg in terminal + response.json('Marked Complete') // response sent to client }) - .catch(error => console.error(error)) + .catch(error => console.error(error)) // if there is an error it will be shown in terminal }) -app.put('/markUnComplete', (request, response) => { +app.put('/markUnComplete', (request, response) => { // route comes from main.js function db.collection('todos').updateOne({thing: request.body.itemFromJS},{ $set: { - completed: false + completed: false // updates to false } },{ - sort: {_id: -1}, + sort: {_id: -1}, // grabs the first one if there are several upsert: false }) .then(result => { - console.log('Marked Complete') - response.json('Marked Complete') + console.log('Marked Complete') // msg in terminal + response.json('Marked Complete') // response sent to client }) - .catch(error => console.error(error)) + .catch(error => console.error(error)) // if there is an error it will be shown in terminal }) -app.delete('/deleteItem', (request, response) => { - db.collection('todos').deleteOne({thing: request.body.itemFromJS}) +app.delete('/deleteItem', (request, response) => { // route comes from main.js function + db.collection('todos').deleteOne({thing: request.body.itemFromJS}) // deletes document in 'todo' collection .then(result => { - console.log('Todo Deleted') - response.json('Todo Deleted') + console.log('Todo Deleted') // msg in terminal + response.json('Todo Deleted') // response sent to client }) - .catch(error => console.error(error)) + .catch(error => console.error(error)) // if there is an error it will be shown in terminal }) -app.listen(process.env.PORT || PORT, ()=>{ - console.log(`Server running on port ${PORT}`) +app.listen(process.env.PORT || PORT, ()=>{ // listening on port provided by hosting site, or local host 2121 + console.log(`Server running on port ${PORT}`) // msg in terminal which port is being used }) \ No newline at end of file diff --git a/views/index.ejs b/views/index.ejs index a26617ae..57570f2a 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -8,19 +8,11 @@ - - - - - - - - Document -

Todo List:

+

Left to do: <%= left %>

Add A Todo:

+