Skip to content

Descriptions to main.js and server.js #895

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DylanFerger wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Descriptions to main.js and server.js #895

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bc3cbf6
Add comments for clarity in server.js
DylanFerger Apr 12, 2026
b63a181
Add comments to main.js for better clarity
DylanFerger Apr 12, 2026
ca61f2c
Update server.js
DylanFerger Apr 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 49 additions & 49 deletions public/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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') // grabs all the fa-trash classes and adds them in a deleteBtn variable array
const item = document.querySelectorAll('.item span') // grabs all spans in the item class parent and adds them in an item variable array
const itemCompleted = document.querySelectorAll('.item span.completed') // grabs all the span.completedvin the item classes parent and adds them in an itemCompleted variable array

Array.from(deleteBtn).forEach((element)=>{
element.addEventListener('click', deleteItem)
Array.from(deleteBtn).forEach((element)=>{ // goes through all items in the deleteBtn array
element.addEventListener('click', deleteItem) // if the item in the array was clicked it runs the deleteItem function on it
})

Array.from(item).forEach((element)=>{
element.addEventListener('click', markComplete)
Array.from(item).forEach((element)=>{ // goes through all items in the item array
element.addEventListener('click', markComplete) // if the item in array was clicked run the markComplete function on it
})

Array.from(itemCompleted).forEach((element)=>{
element.addEventListener('click', markUnComplete)
Array.from(itemCompleted).forEach((element)=>{ // goes through all items in the itemCompleted array
element.addEventListener('click', markUnComplete) // if the item in the array was clicked run the markUnComplete function on it
})

async function deleteItem(){
const itemText = this.parentNode.childNodes[1].innerText
try{
const response = await fetch('deleteItem', {
method: 'delete',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
'itemFromJS': itemText
async function deleteItem(){ // run the funtion as an async function
const itemText = this.parentNode.childNodes[1].innerText // grabs the innertext in childNode in index 1 of the parent node and sets it to the itemText variable
try{ // creates a start block to tell the app what to run in the function
const response = await fetch('deleteItem', { // HTTP requests the deleteItem from the API and awaits a response
method: 'delete', // specifys the HTTP request as a delete which tells the server to delete something
headers: {'Content-Type': 'application/json'}, // tells the server it's sending json data in the body
body: JSON.stringify({ // the body is what you're sending to the server. converts js object to json string
'itemFromJS': itemText // the variable from your code you want to delete
})
})
const data = await response.json()
console.log(data)
location.reload()
const data = await response.json() // creates a data variable with the response from the server and converts it to a js object from json
console.log(data) // logs the data in the console
location.reload() // reloads the page

}catch(err){
console.log(err)
}catch(err){ // runs this if there's an error during the try block
console.log(err) // logs an error to show that somethiing went wrong during the deleting process
}
}

async function markComplete(){
const itemText = this.parentNode.childNodes[1].innerText
try{
const response = await fetch('markComplete', {
method: 'put',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
'itemFromJS': itemText
async function markComplete(){ // run the function as an async function
const itemText = this.parentNode.childNodes[1].innerText // grabs the innertext in childNode in index 1 of the parent node and sets it to the itemText variable
try{ // creates a start block to tell the app what to run in the function
const response = await fetch('markComplete', { // HTTP requests the markComplete from the API and awaits a response
method: 'put', // specifys the HTTP request as a put which tells the server to update something
headers: {'Content-Type': 'application/json'}, // tells the server it's sending json data in the body
body: JSON.stringify({ // the body is what you're sending to the server. converts js object to json string
'itemFromJS': itemText // the variable from your code you want to mark as complete
})
})
const data = await response.json()
console.log(data)
location.reload()
const data = await response.json() // creates a data variable with the response from the server and converts it to a js object from json
console.log(data) // logs the data in the console
location.reload() // reloads the page

}catch(err){
console.log(err)
}catch(err){ // runs this if there's an error during the try block
console.log(err) // logs an error to show that somethiing went wrong during the deleting process
}
}

async function markUnComplete(){
const itemText = this.parentNode.childNodes[1].innerText
try{
const response = await fetch('markUnComplete', {
method: 'put',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
'itemFromJS': itemText
async function markUnComplete(){ // run the function as an async function
const itemText = this.parentNode.childNodes[1].innerText // grabs the innertext in childNode in index 1 of the parent node and sets it to the itemText variable
try{ // creates a start block to tell the app what to run in the function
const response = await fetch('markUnComplete', { // HTTP requests the markUnComplete from the API and awaits a response
method: 'put', // specifys the HTTP request as a put which tells the server to update something
headers: {'Content-Type': 'application/json'}, // tells the server it's sending json data in the body
body: JSON.stringify({ // the body is what you're sending to the server. converts js object to json string
'itemFromJS': itemText // the variable from your code you want to mark as complete
})
})
const data = await response.json()
console.log(data)
location.reload()
const data = await response.json() // creates a data variable with the response from the server and converts it to a js object from json
console.log(data) // logs the data in the console
location.reload() // reloads the page

}catch(err){
console.log(err)
}catch(err){ // runs this if there's an error during the try block
console.log(err) // logs an error to show that somethiing went wrong during the deleting process
}
}
}
110 changes: 55 additions & 55 deletions server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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') // set up express in our app
const app = express() // also setting up express in our app
const MongoClient = require('mongodb').MongoClient // setting up mongodb to work in our app
const PORT = 2121 // setting the port we will run our app on
require('dotenv').config() // imports the dotenv npm packages and calls them with the .config method


let db,
dbConnectionStr = process.env.DB_STRING,
dbName = 'todo'
let db, // declares the db variable
dbConnectionStr = process.env.DB_STRING, // adds the db string value to the dbConnectionStr variable
dbName = 'todo' // adds the 'todo' string to the dbName variable to use to connect our db later

MongoClient.connect(dbConnectionStr, { useUnifiedTopology: true })
.then(client => {
console.log(`Connected to ${dbName} Database`)
db = client.db(dbName)
MongoClient.connect(dbConnectionStr, { useUnifiedTopology: true }) // establishes connection to mongo db
.then(client => { // tells the app to do this next phase after finishing establishing a connection
console.log(`Connected to ${dbName} Database`) // lets us know when our db is connected succesfully in the console
db = client.db(dbName) // uses the declared db variable earlier to initialize a connection to a specific mongodb database
})

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') // letting express know you're using ejs as your templating language
app.use(express.static('public')) // setting up the public folder so any files in it just work with our backend (css, main.js)
app.use(express.urlencoded({ extended: true })) // replace body parser (this and next line)
app.use(express.json()) // peak into the request object and get everything we need out of it


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)=>{ // tells the app to get the app page attached to the '/'
const todoItems = await db.collection('todos').find().toArray() // finds the info from the db and turns it into an array of info
const itemsLeft = await db.collection('todos').countDocuments({completed: false}) // counts the number of items left in the db with the {completed: false} match
response.render('index.ejs', { items: todoItems, left: itemsLeft }) // renders the info into an ejs file to show the items on the todo list and then the items left to do
// db.collection('todos').find().toArray()
// .then(data => {
// db.collection('todos').countDocuments({completed: false})
Expand All @@ -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})
.then(result => {
console.log('Todo Added')
response.redirect('/')
app.post('/addTodo', (request, response) => { // a post request that initializes an addition to the todo list added by the user
db.collection('todos').insertOne({thing: request.body.todoItem, completed: false}) // goes into the db and inserts a todo item into the db and adds shows that it hasn't been completed yet
.then(result => { // after the above is done we do the below next
console.log('Todo Added') // tells us in the console that the item was added succesfully to the todo list
response.redirect('/') // reloads the page to show the updated list
})
.catch(error => console.error(error))
.catch(error => console.error(error)) // logs an error if adding the item to the db fails
})

app.put('/markComplete', (request, response) => {
db.collection('todos').updateOne({thing: request.body.itemFromJS},{
$set: {
completed: true
app.put('/markComplete', (request, response) => { // starts a put request to update the app and db if the user marks an item as completed
db.collection('todos').updateOne({thing: request.body.itemFromJS},{ // finds the item in the db that is going to be updated in the code below
$set: { // used to replace a value in the db with a specified value
completed: true // replaces the value "false" with "true"
}
},{
sort: {_id: -1},
upsert: false
sort: {_id: -1}, // tells the request to grab the first item in database with the correct value
upsert: false // makes sure if the sort function above has nothing to filter, nothing is done
})
.then(result => {
console.log('Marked Complete')
response.json('Marked Complete')
.then(result => { // do the below code after the code above is finished
console.log('Marked Complete') //logs that the object in the db has been updated
response.json('Marked Complete') // json responds telling the user the put request is completed and the todo item was marked completed
})
.catch(error => console.error(error))
.catch(error => console.error(error)) // throws an error if the item failed to be marked completed

})

app.put('/markUnComplete', (request, response) => {
db.collection('todos').updateOne({thing: request.body.itemFromJS},{
$set: {
completed: false
app.put('/markUnComplete', (request, response) => { // starts a put request to update the app and db if the user marks an item as incompleted
db.collection('todos').updateOne({thing: request.body.itemFromJS},{ // goes into the db to find the item to be marked as incompleete
$set: { // used to replace a value of an item in the db
completed: false // replaces the true value for a false on the requested todo list item
}
},{
sort: {_id: -1},
upsert: false
sort: {_id: -1}, // sorts the list in descending order
upsert: false // makes sure nothing happens if the sort function isn't able to sort anything
})
.then(result => {
console.log('Marked Complete')
response.json('Marked Complete')
.then(result => { // tells the server to do the next code after finishing the above code
console.log('Marked Complete') // logs complete in the console one the put is finished succesfully
response.json('Marked Complete') // repsonds to the user that the update of the todo list item has been marked as incomplete
})
.catch(error => console.error(error))
.catch(error => console.error(error)) // throws an error if the todo item fails to be marked as incomplete

})

app.delete('/deleteItem', (request, response) => {
db.collection('todos').deleteOne({thing: request.body.itemFromJS})
.then(result => {
console.log('Todo Deleted')
response.json('Todo Deleted')
app.delete('/deleteItem', (request, response) => { // starts a delete request to delete a todo list item from the app and db
db.collection('todos').deleteOne({thing: request.body.itemFromJS}) // goes into the db and finds the item to be deleted and deletes it
.then(result => { // does the next code after deleting the item succesfully
console.log('Todo Deleted') // logs the message 'todo deleted'
response.json('Todo Deleted') // adds a response to let the user know the todo item has been deleted successfully
})
.catch(error => console.error(error))
.catch(error => console.error(error)) // throws an error if a problem occurs trying to delete the item and fails

})

app.listen(process.env.PORT || PORT, ()=>{
console.log(`Server running on port ${PORT}`)
})
app.listen(process.env.PORT || PORT, ()=>{ // starts a request for the app to start running on a port
console.log(`Server running on port ${PORT}`) // telling our app to listen on process.env port or our own port we say (2121 in this case)
})