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

$(9$ marks$)$

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

"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: Q$1($c$)($ii$)$

$//$ Remove the item from local storage by key

localStorage.removeItem$($itemKey$)$;

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