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 applic

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.html

After 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.js

var express = require(‘express’);

var app = express();

var cors = require(‘cors’);

var bodyParser = require(“body-parser”);

// middleware for the application

// cross-origin

app.use(cors());

// parse JSON

app.use(bodyParser.json());

// serve css files in the root folder to the client

app.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 client

app.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 list

app.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 lists

app.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 list

app.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 path

app.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 started

app.get(‘/’, (req, res) => {

res.sendFile(‘todo.html’, { root: __dirname });

});

// Listen for HTTP requests on port 3000

app.listen(3000, () => {

console.log(“listening on port 3000”);

});

this is java Script and you can find all files in one text file here

https://cdn.filesend.jp/private/UZq38ACYU3l6oGPN7f…

the link has all files