Add project files.

0007582a · adelysf · 642a8ec4 · 0007582a · 0007582a · 0007582a
Commit 0007582a authored Nov 7, 2023 by adelysf
--- a/Task.js
+++ b/Task.js
+const mongoose = require("mongoose");
+const taskSchema = new mongoose.Schema({
+  task: {
+    type:String,
+    required:true
+  },
+  isCompleted: {
+    type:String,
+    required:true,
+    default:"0"
+  }
+});
+module.exports = new mongoose.model("Task", taskSchema);
--- a/app.js
+++ b/app.js
+//importing modules
+const express = require("express");
+const mongoose = require("mongoose");
+const app = express();
+//connecting to the database
+mongoose.connect("mongodb://localhost/taskdb");
+//gather data from forms
+app.use(express.urlencoded({ extended: true }));
+//use public folder for static files (an image here)
+app.use(express.static("public"));
+// Logs details with morgan module
+const morgan = require("morgan");
+app.use(morgan("dev"));
+//the views is set by an ejs file
+app.set("view engine", "ejs");
+//routes are defining the differents features of the app
+app.use(require("./routes/index"))
+app.use(require("./routes/taskRoutes"))
+app.listen(3000, () => console.log("Server started listening on port: 3000"));
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "tda",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "ejs": "^3.1.9",
+    "express": "^4.18.2",
+    "method-override": "^3.0.0",
+    "mongoose": "^8.0.0",
+    "morgan": "^1.10.0"
+  }
+}
--- a/public/logo.png
+++ b/public/logo.png
--- a/routes/index.js
+++ b/routes/index.js
+const router = require("express").Router()
+const Task = require("../Task");
+router.get("/", async(req, res) => {
+    const allTasks = await Task.find();
+    res.render("index", {task: allTasks})
+})
+module.exports = router;
\ No newline at end of file
--- a/routes/taskRoutes.js
+++ b/routes/taskRoutes.js
+// defining a router to organise routes
+const router = require("express").Router();
+const Task = require("../Task");
+// route to add a task
+router.post("/add/task", (req, res) => {
+  const { task } = req.body;
+  const newTask = new Task({ task });
+  newTask.save().then(() => {
+      console.log("The task has been added to the list.");
+      res.redirect("/");
+    })
+    .catch((err) => console.log(err));
+})
+// route to delete a task
+router.get("/delete/task/:_id", (req, res) => {
+  const { _id } = req.params;
+  Task.deleteOne({ _id }).then(() => {
+      console.log("The task has been deleted.");
+      res.redirect("/");
+    })
+    .catch((err) => console.log(err));
+})
+//route to update a task
+router.get("/update/task/:_id",(req,res)=>{
+    const {_id}=req.params;
+    Task.updateOne({_id}, { isCompleted:"1"}).then(()=>{
+        console.log("The task has been completed")
+        res.redirect('/')
+    })
+    .catch((err)=>console.log(err));
+});
+module.exports = router;
--- a/views/index.ejs
+++ b/views/index.ejs
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>ToDo App</title>
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+        <style>
+            .hov:hover {
+                background-color: rgb(245, 245, 245);
+            }
+            .hov-completed:hover{
+                background-color: #90EE90;
+            }
+            .task-item {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+            .completed-task {
+                background-color: #c0f7c0;
+            }
+            .hide-completed {
+                display: none;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="container" style="margin-top: 50px;">
+                    <h3 style="text-align: center;"><img src="logo.png" width="100" height="100" style="margin-bottom: 10px;"/><br>ToDo App</h3>
+                    <div class="section">
+                        <p class="lead" style="text-align: center;">Organize your life with our ToDo App and stop forgetting things!</p>
+            </div>
+        </div>
+        <div class="container mt-5">
+            <form action="/add/task" class="d-flex" method="POST">
+                <input type="text" name="task" class="form-control" placeholder="Type a task to do">
+                <button type="submit" class="btn btn-outline-dark sm-">Add</button>
+            </form>
+            <ul class="list-group mt-3">
+                <% task.forEach(tasks => { %>
+                    <% if (tasks.isCompleted === '0') { %>
+                        <li class="list-group-item hov task-item">
+                            <%= tasks.task %>
+                            <span>
+                                <a href="/update/task/<%= tasks._id %>" class="btn btn-success btn-sm-">Task completed</a>
+                                <a href="/delete/task/<%= tasks._id %>" class="btn btn-dark btn-sm-">Delete the task</a>
+                            </span>
+                        </li>
+                    <% } %>
+                <% }) %>
+                <% task.forEach(tasks => { %>
+                    <% if (tasks.isCompleted === '1') { %>
+                        <li class="list-group-item hov-completed task-item completed-task">
+                            <%= tasks.task %>
+                            <span>
+                                <a href="/delete/task/<%= tasks._id %>" class="btn btn-dark btn-sm-">Delete the task</a>
+                            </span>
+                        </li>
+                    <% } %>
+                <% }) %>
+            </ul>
+            <button id="showCompletedTasks" class="btn btn-outline-success sm- mt-3">Completed tasks</button>
+            <script>
+                document.addEventListener("DOMContentLoaded", function () {
+                    const showCompletedButton = document.getElementById("showCompletedTasks");
+                    const completedTasks = document.querySelectorAll(".completed-task");
+                    const hideCompletedClass = "hide-completed";
+                    // Initially hide completed tasks
+                    completedTasks.forEach(function (task) {
+                        task.classList.add(hideCompletedClass);
+                    });
+                    // Verify if there are completed tasks to show (or not) the button
+                    const hasCompletedTasks = document.querySelector(".completed-task");
+                    if (!hasCompletedTasks) {
+                        showCompletedButton.style.display = "none";
+                    }
+                    showCompletedButton.addEventListener("click", function () {
+                        // Switch the visibility of hidden tasks
+                        completedTasks.forEach(function (task) {
+                            if (task.classList.contains(hideCompletedClass)) {
+                                task.classList.remove(hideCompletedClass);
+                            } else {
+                                task.classList.add(hideCompletedClass);
+                            }
+                        });
+                    });
+                });
+            </script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+    </body>
+</html>