University of California Re Invent a To Do List Project
We are trying to reinvent the To-do list! The engineering team has made some progress on the application, but I need you to complete the rest. This is why we hired you! Your task is to look at the codebase and make the new and improved to-do list ExpressJS application work as intended. We'll need you to fill in the holes in the server-side application code that the other engineers have left incomplete. We currently have the UI working as expected but none of the data we pass to the backend persists yet, which makes for bad user experience using our web application. The lead engineer says that you only need to modify the bolded file in the folder structure below, which will contain additional comments/instructions about which parts of the code to complete. Take note that some of the code will already be done for you and you may reference the client-side code in `todo.html` if you need additional context for the server-side code. The structure of the unzipped folder will look like the following:final_test/ node_modules/ // holds package dependencies for this application package-lock.json // defines versions of dependency packages that are installed for this application package.json // list of dependencies app.js // server-side code todo.html // client-side UI main.css // contains simple styling for the given todo.htmlAfter you start the web application (`node app.js`) in your computer's terminal/console, go to http://localhost:3000 (Links to an external site.)Adding a task If a user types a task into the input box and single-clicks the Add button or presses the Enter key, the task is appended to the end of the TODO list.Duplicate tasks found in TODO or Completed are not added and cause an alert popup to show stating "Bad Request: task already exists!".Data is persisted in the same order when the browser is refreshed, closed, or cleared of local storage + cache.Completing a task When a user single-clicks a task in the TODO list, the item is removed from the TODO list and appended to the end of the Completed list.Data moved between lists is persisted in the same order when the browser is refreshed, closed, or cleared of local storage + cache.Deleting tasks (50 pts)When a user single-clicks a task item in the Completed list, the task is deleted from the the list and no longer appears in the UI at all.When a user single-clicks the Clear All button, all tasks in the TODO and Completed lists are deleted from their respective lists.Tasks that have been deleted remain deleted after browser is refreshed, closed, or cleared of local storage + cache.Data persistence requirement (50% pts deduction if not met):You may not use browser local storage because we want the user to be able to access their saved data from anywhere! You are required to handle data persistence by storing the data in-memory in the provided Express server that we will run in the cloud for them.app.jsvar express = require('express');var app = express();var cors = require('cors');var bodyParser = require("body-parser");// middleware for the application// cross-originapp.use(cors());// parse JSONapp.use(bodyParser.json());// serve css files in the root folder to the clientapp.use(express.static('.'))/* Our server-side code is riddled with comments and incomplete code! Your task is to complete the code so that everything a user does on the client side (browser side) is actually PERSISTED to our in-memory datastore. This way if the user refreshes the page, their tasks are not lost. This is the key component we need to GA this product so get workin'! Once you've started the express application with `node app.js`, to view the application, go to `http://localhost:3000` in your browser. You should see a ToDo list HTML page with a state-of-the-art user interface! In order to test that the application is working as expected: 1. Restart the node application by Ctrl+C, Command+C, and/or exiting the terminal and then executing `node app.js` again. Or you may install nodemon (https://www.npmjs.com/package/nodemon) in this directory (`npm install nodemon`). If you run `nodemon app.js`, you it will detect any changes made to the files and reload the express server automatically. 2. After updating code, interact with the UI or use cURL (https://www.booleanworld.com/curl-command-tutorial-examples/) to test your handlers (API endpoints). Each handler is annotated with what you need to completed. We've already put some filler code that you do not necessarily need to worry about updating. For example, the handler to serve the todo.html page to the client is already completed for you. If you have any questions, feel free to reach out to your new CEO, Anthony, by email. GOOD LUCK!*//* The in-memory storage is set globally here. There are currently two datastore objects to hold TODO and Completed tasks. There is some pre-populated data here that we'll definitely remove when we release this app to users!*/let taskDatastore = { "todo": [ "finish test 2", ], "completed": [ "read the test instructions", ],};// GET handler returns all tasks to the clientapp.get('/tasks', (req, res) => { res.set('Content-Type', 'application/json'); /* Returns 200 with response body containing the datastore */ res.status(200).send(taskDatastore);});// POST handler adds a task to a listapp.post('/task', (req, res) => { res.set('Content-Type', 'application/json'); /* Input: data coming into this handler will be in the form: {"task": "mytask"} You can see contents of the incoming request with: console.log(req.body.task). "req" is the request and within it, the property req.body holds the incoming data above from the client request, hence "task" is a property of that incoming request data object. Output: This handler should send the datastore back to the client with a 201 response code if successful, and return and 400 response code with no response body if the task already exists in either the TODO or Completed list. */ /* YOUR CODE HERE */ // send 201 status with no response body res.status(201).send({})});// DELETE handler deletes all tasks in TODO and Completed listsapp.delete('/tasks', (req, res) => { /* This handler will return 204 status code with an empty body when all tasks are deleted from the TODO and Completed lists. */ /* YOUR CODE HERE */ // send 204 status code with no response body res.status(204).send()});// DELETE handler deletes a task from the TODO list// and adds the task to the Completed listapp.delete('/task/todo/:task', (req, res) => { /* req.params gets a parameter variable The :task part of the path indicates data is being passed in the URL instead of the query or in post data. To get this data, you would use `req.params.task` This handler will return 204 status code with no response body after deleting the task from the TODO list and adding the task to the Completed list. */ /* YOUR CODE HERE */ // send 204 status code with no response body res.status(204).send()});// DELETE handler deletes a task the client passes via the URL pathapp.delete('/task/completed/:task', (req, res) => { /* This handler (like the previous handler) will return a 204 status code with no response body after it deletes the task from the Completed list. */ /* YOUR CODE HERE */ // send 204 status code with no response body res.status(204).send();});// This base handler will serve the HTML page todo.html to localhost:3000 when// the app is startedapp.get('/', (req, res) => { res.sendFile('todo.html', { root: __dirname });});// Listen for HTTP requests on port 3000app.listen(3000, () => { console.log("listening on port 3000");});this is java Script and you can find all files in one text file herehttps://cdn.filesend.jp/private/UZq38ACYU3l6oGPN7f...the link has all files