3. (9 marks) Write the code for the send Newltem(newitem) function in the todo.js file. This function must send the newly created item to the server so the list of items may be updated. If successful, the item should be added to the client's list of items and the display must be updated. If not successful, then client-side updates do not occur. Contents of todo.html:

Item Name:

Contents of todo.js: let items = []; function init() { document.getElementById("additem").addEventListener("click", add Item); setInterval (refreshlist, 5000); function refreshList() { req = new XMLHttpRequest(); req.onreadystatechange = function() { if(this.readyState==4 && this.status == 200){ items = JSON.parse(req. responseText).items; renderlist(); req.open("GET", "http://localhost: 3000/list'); req.send(); // Creates a new item and calls function to send the item to the server function addItem() { let itemName = document.getElementById("itemname").value; if(itemName. length == 0){ alert("You must enter an item name."); return; sendNewItem({name: itemName}); //Continues on next page... function sendNewItem(new Item) { //Your code would go here. //Removes displayed list data and renders new list using contents of items function renderList() { let list = document.getElementById("list"); while(list.firstChild){ list.removeChild(list.first Child); items.forEach(elem => { let newDiv = document.createElement("div"); let newItem = document.createElement("input"); newItem.type = "checkbox"; newItem.value = elem.name; newItem.id = elem.name; let text = document.createTextNode (elem.name); newDiv.appendChild(newItem); newDiv.appendChild(text); list.appendChild(newDiv); }); Contents of server.js: let http = require('http'); let fs = require('fs'); let path = require('path'); let items = { "items" : [{name: "study"}] }; //Helper function for sending 404 message function send484 (response) { response.writeHead ( 404, { "Content-Type': 'text/plain' }); response.end('Error 404: Resource not found.'); //Continues on next page... let server = http.createServer (function (req, res) { if (req.method == 'GET') { if (req.url == "/todo.html" || req.url == '/'){ res.writeHead (200, { "content-type": "text/html" }); fs.createReadStream("./todo.html").pipe (res); }else if (req.url == '/todo.js'){ res.writeHead(200, { "content-type': "application/javascript" }); fs.createReadStream("./todo.js").pipe (res); }else if (req.url == '/list'){ res.writeHead( 200, { "content-type': "application/json" }); res.end(JSON.stringify(items); }else{ send404(res); return; }else if (req.url == "/items" && req.method == "POST"){ res.writeHead (200, { "content-type': "text/html" }); fs.createReadStream("./todo.html").pipe(res); }else if (req.method == "POST" && req.url = '/list) let body = ""; req.on('data', (chunk) =>{ body += chunk; }); req.on('end', () => { newItem = JSON.parse(body); items. items.push(newItem); res.writeHead( 200, { "content-type':"application/json" }); res.end(); }); }else{ send404 (res); }); server.listen(3000); 3. (9 marks) Write the code for the send Newltem(newitem) function in the todo.js file. This function must send the newly created item to the server so the list of items may be updated. If successful, the item should be added to the client's list of items and the display must be updated. If not successful, then client-side updates do not occur. Contents of todo.html:

Item Name:

Contents of todo.js: let items = []; function init() { document.getElementById("additem").addEventListener("click", add Item); setInterval (refreshlist, 5000); function refreshList() { req = new XMLHttpRequest(); req.onreadystatechange = function() { if(this.readyState==4 && this.status == 200){ items = JSON.parse(req. responseText).items; renderlist(); req.open("GET", "http://localhost: 3000/list'); req.send(); // Creates a new item and calls function to send the item to the server function addItem() { let itemName = document.getElementById("itemname").value; if(itemName. length == 0){ alert("You must enter an item name."); return; sendNewItem({name: itemName}); //Continues on next page... function sendNewItem(new Item) { //Your code would go here. //Removes displayed list data and renders new list using contents of items function renderList() { let list = document.getElementById("list"); while(list.firstChild){ list.removeChild(list.first Child); items.forEach(elem => { let newDiv = document.createElement("div"); let newItem = document.createElement("input"); newItem.type = "checkbox"; newItem.value = elem.name; newItem.id = elem.name; let text = document.createTextNode (elem.name); newDiv.appendChild(newItem); newDiv.appendChild(text); list.appendChild(newDiv); }); Contents of server.js: let http = require('http'); let fs = require('fs'); let path = require('path'); let items = { "items" : [{name: "study"}] }; //Helper function for sending 404 message function send484 (response) { response.writeHead ( 404, { "Content-Type': 'text/plain' }); response.end('Error 404: Resource not found.'); //Continues on next page... let server = http.createServer (function (req, res) { if (req.method == 'GET') { if (req.url == "/todo.html" || req.url == '/'){ res.writeHead (200, { "content-type": "text/html" }); fs.createReadStream("./todo.html").pipe (res); }else if (req.url == '/todo.js'){ res.writeHead(200, { "content-type': "application/javascript" }); fs.createReadStream("./todo.js").pipe (res); }else if (req.url == '/list'){ res.writeHead( 200, { "content-type': "application/json" }); res.end(JSON.stringify(items); }else{ send404(res); return; }else if (req.url == "/items" && req.method == "POST"){ res.writeHead (200, { "content-type': "text/html" }); fs.createReadStream("./todo.html").pipe(res); }else if (req.method == "POST" && req.url = '/list) let body = ""; req.on('data', (chunk) =>{ body += chunk; }); req.on('end', () => { newItem = JSON.parse(body); items. items.push(newItem); res.writeHead( 200, { "content-type':"application/json" }); res.end(); }); }else{ send404 (res); }); server.listen(3000)