diff --git a/.vscode/settings.json b/.vscode/settings.json index c3c81b8b..ad8a6156 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,4 @@ { "editor.fontSize": 42, - "terminal.integrated.fontSize": 62 + "terminal.integrated.fontSize": 14 } \ No newline at end of file diff --git a/public/css/style.css b/public/css/style.css index 0475253a..67493171 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,7 +1,13 @@ -h1{ - color: red; +/* targets h1 */ +h1{ + /* colors h1 red */ + color: red; } -.completed{ - color: gray; - text-decoration: line-through; + +/* targets completed class */ +.completed{ + /* colors it gray */ + color: gray; + /* strikes through */ + text-decoration: line-through; } \ No newline at end of file diff --git a/public/js/main.js b/public/js/main.js index ff0eac39..8d85cb11 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -1,72 +1,73 @@ -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') // targets all icons with trash +const item = document.querySelectorAll('.item span') // targets all spans with class item +const itemCompleted = document.querySelectorAll('.item span.completed') // targets same as above but with completed class -Array.from(deleteBtn).forEach((element)=>{ +Array.from(deleteBtn).forEach((element)=>{ //calls deleteItem when deleteBtn is clicked element.addEventListener('click', deleteItem) }) -Array.from(item).forEach((element)=>{ +Array.from(item).forEach((element)=>{ // calls markComplete when clicked element.addEventListener('click', markComplete) }) -Array.from(itemCompleted).forEach((element)=>{ +Array.from(itemCompleted).forEach((element)=>{ //calls markUnComplete when item is completed and marks it incomplete element.addEventListener('click', markUnComplete) }) -async function deleteItem(){ - const itemText = this.parentNode.childNodes[1].innerText +async function deleteItem(){ // async calls deleteItem + const itemText = this.parentNode.childNodes[1].innerText // item's childNode's innerText try{ - const response = await fetch('deleteItem', { - method: 'delete', - headers: {'Content-Type': 'application/json'}, - body: JSON.stringify({ - 'itemFromJS': itemText + const response = await fetch('deleteItem', { // calls fetch to delete item + method: 'delete', // tells method + headers: {'Content-Type': 'application/json'}, // using json + body: JSON.stringify({ + 'itemFromJS': itemText//tells which item to delete (itemText) }) }) - const data = await response.json() - console.log(data) - location.reload() + const data = await response.json() // awaits response + console.log(data) // consoles data + location.reload() // reloads page - }catch(err){ + }catch(err){ // throws error if caught console.log(err) } } -async function markComplete(){ - const itemText = this.parentNode.childNodes[1].innerText +async function markComplete(){ // async function to mark complete + const itemText = this.parentNode.childNodes[1].innerText // item's childNode's innerText try{ - const response = await fetch('markComplete', { - method: 'put', - headers: {'Content-Type': 'application/json'}, + const response = await fetch('markComplete', { // calls fetch to mark complete + method: 'put', //uses put method + headers: {'Content-Type': 'application/json'}, // using json body: JSON.stringify({ - 'itemFromJS': itemText + 'itemFromJS': itemText //tells which item to update (itemText) }) }) - const data = await response.json() - console.log(data) - location.reload() + const data = await response.json() // awaits response + console.log(data) // consoles data + location.reload() // reloads page - }catch(err){ + }catch(err){ // throws error if caught console.log(err) } } -async function markUnComplete(){ - const itemText = this.parentNode.childNodes[1].innerText - try{ - const response = await fetch('markUnComplete', { - method: 'put', - headers: {'Content-Type': 'application/json'}, +async function markUnComplete(){ // async function to mark uncomplete + const itemText = this.parentNode.childNodes[1].innerText // item's childNode's innerText + try{ + const response = await fetch('markUnComplete', {// calls fetch to mark uncomplete + method: 'put', // uses put method to update + headers: {'Content-Type': 'application/json'}, // using json body: JSON.stringify({ - 'itemFromJS': itemText + 'itemFromJS': itemText //tells which item to update (itemText) }) }) - const data = await response.json() - console.log(data) - location.reload() + const data = await response.json() // awaits response + console.log(data) // consoles data + location.reload() // reloads page + - }catch(err){ + }catch(err){ // throws error if caught console.log(err) } } \ No newline at end of file diff --git a/server.js b/server.js index 58b53e2f..e48dae3f 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') // requires express +const app = express() // calls express and stores it in a variable 'app' +const MongoClient = require('mongodb').MongoClient //gives access to mongodb +const PORT = 2121 // variable for port in case it needs to be changed +require('dotenv').config() //required for .env to store sensitive data -let db, - dbConnectionStr = process.env.DB_STRING, - dbName = 'todo' +let db, // declares db + dbConnectionStr = process.env.DB_STRING, // declares connection string. stores variable in env string + dbName = 'todo' // declares the database name in mongo -MongoClient.connect(dbConnectionStr, { useUnifiedTopology: true }) +MongoClient.connect(dbConnectionStr, { useUnifiedTopology: true }) // awaits mongo. connects mongodb .then(client => { - console.log(`Connected to ${dbName} Database`) - db = client.db(dbName) + console.log(`Connected to ${dbName} Database`) + db = client.db(dbName) // connects to db within mongo }) -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 up view engine to ejs +app.use(express.static('public')) // able to use public folder for static files +app.use(express.urlencoded({ extended: true })) // able to parse incoming request bodies that are url encoded +app.use(express.json()) // able to use json requests with express -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. root directory + const todoItems = await db.collection('todos').find().toArray() //awaits the todo collection within the db + const itemsLeft = await db.collection('todos').countDocuments({completed: false}) // awaits another collection. marks it as not completed + response.render('index.ejs', { items: todoItems, left: itemsLeft }) // render the index ejs file. names of the items is todoItems and the items left are itemsLeft. // 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) => { // post request. api endpoint is addTodo + db.collection('todos').insertOne({thing: request.body.todoItem, completed: false}) // takes name from form and assigns it to thing. it inserts that one thing into the collection on mongo .then(result => { - console.log('Todo Added') - response.redirect('/') + console.log('Todo Added') // console notification + response.redirect('/') // redirects to root }) - .catch(error => console.error(error)) + .catch(error => console.error(error)) // throws error }) -app.put('/markComplete', (request, response) => { - db.collection('todos').updateOne({thing: request.body.itemFromJS},{ +app.put('/markComplete', (request, response) => { // put (update) request. endpoint is markComplete + db.collection('todos').updateOne({thing: request.body.itemFromJS},{ // targets one and updates the thing $set: { - completed: true + completed: true // sets to true } },{ - sort: {_id: -1}, - upsert: false + sort: {_id: -1}, // sorts by id descending + upsert: false // upsert inserts rows into db table. }) .then(result => { - console.log('Marked Complete') - response.json('Marked Complete') + console.log('Marked Complete') // lets developer know its done + response.json('Marked Complete') // lets user know its done }) - .catch(error => console.error(error)) + .catch(error => console.error(error))// throws error }) -app.put('/markUnComplete', (request, response) => { - db.collection('todos').updateOne({thing: request.body.itemFromJS},{ +app.put('/markUnComplete', (request, response) => { // put request. marks incomplete + db.collection('todos').updateOne({thing: request.body.itemFromJS},{ // targets item and updates thing $set: { - completed: false + completed: false // sets to false } },{ - sort: {_id: -1}, - upsert: false + sort: {_id: -1}, // sorts by id descending + upsert: false // upsert inserts rows into db table. }) .then(result => { - console.log('Marked Complete') - response.json('Marked Complete') + console.log('Marked Complete') // lets developer know its don + response.json('Marked Complete') // lets user know its done }) - .catch(error => console.error(error)) + .catch(error => console.error(error)) // throws error }) -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) => { // deletes request. endpoint is deleteItem + db.collection('todos').deleteOne({thing: request.body.itemFromJS}) // targets thing and deletes the one thing + .then(result => { + console.log('Todo Deleted')// lets developer know its done + response.json('Todo Deleted') // lets user know its done }) - .catch(error => console.error(error)) + .catch(error => console.error(error))// throws error }) -app.listen(process.env.PORT || PORT, ()=>{ - console.log(`Server running on port ${PORT}`) +app.listen(process.env.PORT || PORT, ()=>{ // listens for port + console.log(`Server running on port ${PORT}`) // consoles port }) \ No newline at end of file diff --git a/views/index.ejs b/views/index.ejs index a26617ae..c79fcd23 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -1,47 +1,62 @@ - - - - - - + + + + + + + + + + + + + Document - - + + + + - - - - - - - - Document - - -

Todo List:

-