From c9aff9a6d2807dd60b2793c85e5389a5a2af68ac Mon Sep 17 00:00:00 2001 From: adil Date: Thu, 7 May 2026 21:57:50 +0100 Subject: [PATCH] add comments to explain the code --- .vscode/settings.json | 4 ++-- public/js/main.js | 50 +++++++++++++++++++++++++++---------------- server.js | 30 ++++++++++++++++++-------- views/index.ejs | 17 ++++++++++----- 4 files changed, 67 insertions(+), 34 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index c3c81b8b..84b266ba 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,4 @@ { - "editor.fontSize": 42, - "terminal.integrated.fontSize": 62 + "editor.fontSize": 17, + "terminal.integrated.fontSize": 17, } \ No newline at end of file diff --git a/public/js/main.js b/public/js/main.js index ff0eac39..c1805de4 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -1,58 +1,72 @@ +// this finds every item in html with class '.fa-trash' and assign it to a variable const deleteBtn = document.querySelectorAll('.fa-trash') +// this finds every item in html with class '.item span' and assign it to a variable const item = document.querySelectorAll('.item span') +// this finds every item in html with class '.item span.completed' and assign it to a variable const itemCompleted = document.querySelectorAll('.item span.completed') +//this add an eventlistner to every trash button and fires a function deleteItem Array.from(deleteBtn).forEach((element)=>{ element.addEventListener('click', deleteItem) }) +//this add an eventlistner to every item and fires a function markComplete Array.from(item).forEach((element)=>{ element.addEventListener('click', markComplete) }) +//this add an eventlistner to every complatedItem and fires a function markUnComplete Array.from(itemCompleted).forEach((element)=>{ element.addEventListener('click', markUnComplete) }) - +//Async function that fired as someone click the trash can and it get the task text and sends it to the server as /deleteItem route with a method of delete async function deleteItem(){ + //get task text next to the trash icon const itemText = this.parentNode.childNodes[1].innerText try{ + //Send fetch request to server const response = await fetch('deleteItem', { + //specifeing what method we using method: 'delete', + //specifying the Content-Type of the request headers: {'Content-Type': 'application/json'}, + //data we sending body: JSON.stringify({ 'itemFromJS': itemText }) }) const data = await response.json() console.log(data) + //refresh after everything went okey location.reload() }catch(err){ console.log(err) } } - +//async function that fired as someone click the task, it get that task text and send it to the server as /markComplete route with a method of put 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 + //get task text + 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 + }) }) - }) - const data = await response.json() - console.log(data) - location.reload() - - }catch(err){ - console.log(err) + const data = await response.json() + console.log(data) + location.reload() + + }catch(err){ + console.log(err) + } } -} - +//async function that fired as someone click the task, it get that task text and send it to the server as /markUnComplete route with a method of put async function markUnComplete(){ + //get task text const itemText = this.parentNode.childNodes[1].innerText try{ const response = await fetch('markUnComplete', { diff --git a/server.js b/server.js index 58b53e2f..dc872469 100644 --- a/server.js +++ b/server.js @@ -1,28 +1,36 @@ const express = require('express') +//creates Express app const app = express() +//gets MongoClient const MongoClient = require('mongodb').MongoClient +//port of our server const PORT = 2121 +//this line allows us to use .env require('dotenv').config() - +//mongoDB connection URI let db, dbConnectionStr = process.env.DB_STRING, dbName = 'todo' - +//connect us to the DB MongoClient.connect(dbConnectionStr, { useUnifiedTopology: true }) .then(client => { console.log(`Connected to ${dbName} Database`) db = client.db(dbName) }) - +//allows us to use .ejs app.set('view engine', 'ejs') +//allow our server acces to all folders and files in Public folder app.use(express.static('public')) +//registers Express middleware to parse URL-encoded request bodies app.use(express.urlencoded({ extended: true })) +//allow use to use json app.use(express.json()) - +//this function fires when someone goes to the main page and it goes to todos DB and get all data then send it to the index.ejs as an array app.get('/',async (request, response)=>{ const todoItems = await db.collection('todos').find().toArray() + //counts how many data have complated false and return it a number const itemsLeft = await db.collection('todos').countDocuments({completed: false}) response.render('index.ejs', { items: todoItems, left: itemsLeft }) // db.collection('todos').find().toArray() @@ -34,16 +42,18 @@ app.get('/',async (request, response)=>{ // }) // .catch(error => console.error(error)) }) - +//this function fired with a post fetch with rout /addTodo and it add a task from request.body.todoItem text and give it propriety of complated false app.post('/addTodo', (request, response) => { db.collection('todos').insertOne({thing: request.body.todoItem, completed: false}) .then(result => { + //logs todo added in terminal console.log('Todo Added') + //reload page after task added response.redirect('/') }) .catch(error => console.error(error)) }) - +//this function fired with a put fetch with rout /markComplete and it change a task with request.body.itemFromJS complated proriety to true app.put('/markComplete', (request, response) => { db.collection('todos').updateOne({thing: request.body.itemFromJS},{ $set: { @@ -60,14 +70,16 @@ app.put('/markComplete', (request, response) => { .catch(error => console.error(error)) }) - +//this function fired with a put fetch with rout /markUnComplete and it change a task with request.body.itemFromJS complated proriety to false app.put('/markUnComplete', (request, response) => { db.collection('todos').updateOne({thing: request.body.itemFromJS},{ $set: { completed: false } },{ + //sort tasks from first one added to last sort: {_id: -1}, + //if there is no task with request.body.itemFromJS it doesnt create new one upsert: false }) .then(result => { @@ -77,7 +89,7 @@ app.put('/markUnComplete', (request, response) => { .catch(error => console.error(error)) }) - +//this function fired with a delete fetch with route /deleteItem and it delete the task with request.body.itemFromJS app.delete('/deleteItem', (request, response) => { db.collection('todos').deleteOne({thing: request.body.itemFromJS}) .then(result => { @@ -87,7 +99,7 @@ app.delete('/deleteItem', (request, response) => { .catch(error => console.error(error)) }) - +//making a server app.listen(process.env.PORT || PORT, ()=>{ console.log(`Server running on port ${PORT}`) }) \ No newline at end of file diff --git a/views/index.ejs b/views/index.ejs index a26617ae..2225f812 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -19,28 +19,35 @@

Todo List:

+ - +

Left to do: <%= left %>

Add A Todo:

- +
+ +
- +