PLEAS READ ALL OF THE QUESTION AND THE CODE PROVIDED BEFORE ANSWERING. JUST THE JAVASCRIPT NEEDS EDITING!

Edit the script in the places indicated in tma03.js to read data from the chosen image and store this as an image item in local storage.

When the Add photo button is clicked, the demonstration application allows users to choose an image file (or take a photo on a mobile device), then adds an image entry to the page using dummy image data. The image is not saved. The prototype application should instead use the image chosen by the guest, and save this as an image item. There is a hidden image file input element in the page to allow a file to be chosen, but its event data is not used. Add or edit JavaScript code, where indicated, to achieve the following:

Task 1: when an image entry is added to the DOM, make an image item containing the image data, and store it in local storage.

Task 2: when the file input element selection changes, use a FileReader object to convert the file to a data URL and add an image entry to the DOM using this data URL

The following is the current javascript code I have for adding images:

function addImageEntry(key, data) { // Create a image element var imgElement = new Image(); imgElement.alt = "Photo entry";

// Load the image imgElement.src = data;

// Add a section to the page containing the image addSection(key, imgElement); }

/** * Function to handle Add text button 'click' event */ function addEntryClick() { // Add an empty text entry, using the current timestamp to make a key var key = "diary" + Date.now(); var initialText = ""; var isNewEntry = true; addTextEntry(key, initialText, isNewEntry); }

/** * Function to handle Add photo button 'click' event */ function addPhotoClick() { // Trigger the 'click' event of the hidden file input element // (as demonstrated in Block 3 Part 4) var inputElement = document.querySelector("#image input"); inputElement.click(); }

/** * Function to handle file input 'change' event * @param inputChangeEvent file input 'change' event data */ function processFile(inputChangeEvent) { console.log("processFile called with arguments:", { inputChangeEvent, });

// Create a function to add an image entry using a data URL function addImage(data) { console.log("addImage called with arguments:", { data, });

// Add a new image entry, using the current timestamp to make a key var key = "diary" + Date.now(); addImageEntry(key, data);

// TODO: Q1(c)(iv) Task 1 of 2 // Make an image item using the given data URL // (demonstrated elsewhere in this file) // Store the item in local storage using the given key // (demonstrated elsewhere in this file) var imageData = data; var item = makeItem("image", imageData);

localStorage.setItem(key, item); }

// Add a 'dummy' image entry addImage(window.DUMMY_DATA_URL);

// TODO: Q1(c)(iv) Task 2 of 2 // Complete this function to read a file when it is selected: // (imgElement and messageElement do not exist in this app so remove that code) // ...then call addImage using the data URL you obtain // ...and comment out line above using window.DUMMY_DATA_URL

// Clear the file selection (allows selecting the same file again) inputChangeEvent.target.value = ""; }

I also have a screenshot of the current HTML code and page. THE HTML IS NOT TO BE EDITED

grid ==$0 Add entry Add photo> Add entry Add photo