I have an add text button which creates a text box allowing the user to write a few words inside. I need to save the contents of the text box so that when I type something into the text box and refresh the page it stays there. Currently when I refresh the page, the contents disappear. I have tried various different methods and none have worked so far. The part of my current JAVASCRIPT code that I am working on is as follows:

/** * 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 // ...make a text item using the value // (demonstrated elsewhere in this file) // ...store the item in local storage using the given key }

// TODO: Q1(c)(iii) Task 2 of 2 // Connect the saveEntry event listener to the textarea element 'change' event

As you can see, I have 2 tasks at the bottom to complete. I have also included the HTML code from the dev tools to show what it looks like when I click the add text button on the page.

The Erehwon House Diary zx444197