Please DO NOT copy and paste an answer from another post:

Please edit the javascript code below with answer.

/** * 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); localStorage.removeItem(key);

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

// 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