The following is my javascript code so far.

Please ammend the javascript code and show task 1 and task 2 seperately:

// Execute in strict mode to prevent some common mistakes "use strict";

/** * Make diary data item * @param type Type of item to create, either "text" or "image" * @param data Item data, either text or data URL * @returns JSON string to store in local storage */ function makeItem(type, data) { var itemObject = { type: type, data: data }; return JSON.stringify(itemObject); }

/** * Create and store demonstration items */ function createDemoItems() { console.log("Adding demonstration items to local storage");

var item, data, key;

// Make a demo text item data = "Friday: We arrived to this wonderful guesthouse after a pleasant journey " + "and were made most welcome by the proprietor, Mike. Looking forward to " + "exploring the area tomorrow."; item = makeItem("text", data);

// Make a key using a fixed timestamp key = "diary" + "1536771000001";

// Store the item in local storage //localStorage.setItem(key, item);

// Make a demo text item data = "Saturday: After a super breakfast, we took advantage of one of the many " + "signed walks nearby. For some of the journey this followed the path of a " + "stream to a charming village."; item = makeItem("text", data);

// Make a key using a fixed timestamp key = "diary" + "1536771000002";

// Store the item in local storage //localStorage.setItem(key, item);

// Make a demo image item data = window.DUMMY_DATA_URL; item = makeItem("image", data);

// Make a key using a fixed timestamp key = "diary" + "1536771000003";

// Store the item in local storage //localStorage.setItem(key, item);

// Make a demo text item data = "Sunday: Following a tip from Mike we drove to a gastropub at the head of " + "the valley - a great meal and fabulous views all round."; item = makeItem("text", data);

// Make a key using a fixed timestamp key = "diary" + "1536771000004";

// Store the item in local storage //localStorage.setItem(key, item); }

/** * Add a section to the page containing the given element * @param key Key of item in local storage * @param entryElement HTML element to place inside the section */ function addSection(key, entryElement) { // Create a section element to contain the new entry var sectionElement = document.createElement("section");

// Give the section a class to allow styling sectionElement.classList.add("entry");

// Add the element to the section sectionElement.appendChild(entryElement);

// Create a button to delete the entry var deleteButton = document.createElement("button"); deleteButton.innerHTML = "×"; deleteButton.setAttribute("aria-label", "Delete entry");

// Create an event listener to delete the entry function deleteEntry() { // A new version of this function is created every time addSection is called, // so it can access all the variables available in this call to addSection console.log("deleteEntry called with variables in scope:", { key, entryElement, sectionElement, deleteButton, });

// Remove the section from the page sectionElement.parentNode.removeChild(sectionElement);

// TODO: Q1(c)(ii) // Remove the item from local storage by key // (local storage is in Block 3 Part 5) }

localStorage.removeItem("diary" + "1536771000001", makeItem); localStorage.removeItem("diary" + "1536771000002", makeItem); localStorage.removeItem("diary" + "1536771000003", makeItem); localStorage.removeItem("diary" + "1536771000004", makeItem);

// Connect the event listener to the button 'click' event deleteButton.addEventListener("click", deleteEntry);

// Add the delete button to the section sectionElement.appendChild(deleteButton);

// Get a reference to the element containing the diary entries var diaryElement = document.querySelector("main");

// Get a reference to the first button section (Add entry/photo) in the diary element var buttonElement = diaryElement.querySelector("section.button");

// Add the section to the page after existing entries, // but before the buttons diaryElement.insertBefore(sectionElement, buttonElement); }

/** * Add a text entry to the page * @param key Key of item in local storage * @param initialText Initial text of diary entry * @param isNewEntry true if this is a new entry to start typing into */ function addTextEntry(key, initialText, isNewEntry) { // Create a textarea element to edit the entry var textareaElement = document.createElement("textarea"); textareaElement.rows = 5; textareaElement.placeholder = "(new entry)";

// Set the textarea's value to the given text (if any) textareaElement.value = initialText;

// Add a section to the page containing the textarea addSection(key, textareaElement);

// If this is a new entry (added by the user clicking a button) // move the focus to the textarea to encourage typing if (isNewEntry) { textareaElement.focus(); }

// Create an event listener to save the entry when it changes // (i.e. when the user types into the textarea) function saveEntry() { // A new version of this function is created every time addTextEntry is called, // so it can access all the variables available in this call to addTextEntry console.log("saveEntry called with variables in scope:", { key, initialText, isNewEntry, textareaElement, });

// TODO: Q1(c)(iii) Task 1 of 2 // Save the text entry: // ...get the textarea element's current value // (getting HTML input values is in Block 2 Part 2 Section 6) // ...make a text item using the value // (demonstrated elsewhere in this file) // ...store the item in local storage using the given key // (local storage is in Block 3 Part 5) // Tip: this is easier to test if you complete Task 2 before Task 1 }

// TODO: Q1(c)(iii) Task 2 of 2 // Connect the saveEntry event listener to the textarea element 'change' event // (demonstrated elsewhere in this file) // Tip: this is easier to test if you complete Task 2 before Task 1 }

Edit the script where indicated in 'tma03.js' to store each text entry in local storage when it is edited. (8 marks) The demonstration application allows users to add text entries to the page, but they are not saved. The prototype application should save diary entries as they are typed, so that they reappear when the application is restarted. Add JavaScript code where indicated to achieve the following: - Task 1: make a text item representing the current value of the text area and - store this item in local storage. - Task 2: execute the event listener you completed in Task 1 when the text input changes. In your solution document, provide your amended JavaScript code. Making and testing this change Inspect a text entry in the page to see what HTML elements it is made from. If you have deleted all the diary entries, you may reinstate the demonstration code to create them again. When the 'Add entry' button is clicked, HTML elements including a are added to the page. When users edit the text in this HTML element, it changes on the page, but that change is not saved. This change is to ensure that when each element is added to the page, an event listener is added to it which will update local storage when its value changes. A works like an element that allows multiple lines of text. Read the code and comments above these lines to see what variables exist at this point in the code and how the textarea element is created and its initial value is set. Bear in mind that the application already has or had code to make a text item and store it in local storage - this is how the demonstration entries came to exist. All you need to do is provide the key and text value. Task 2 The code to change is indicated as follows: // TODO: Q1(c)(iii) Task 2 of 2 // Connect the saveEntry event listener to the textarea element 'change' event Use what you have learned in Block 3 Part 4 to connect the event listener. There are further hints in the code and comments. When this change is complete, you will see items change in the 'Application' or 'Storage' tab of your browser developer tools after you type text on the page, and move the focus away from the text input (e.g. by pressing the Tab key on your keyboard or clicking elsewhere on the page). When you reload the page these entries will reappear on the page