Question: ** * Add a text entry to the page * @param key Key of item in local storage * @param text Text of diary entry

**

* Add a text entry to the page

* @param key Key of item in local storage

* @param text Text of diary entry

* @param isNewEntry true if this is a new entry to start typing into

*/

function addTextEntry(key, text, 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 = text;

// 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(key, text) {

// TODO: Q1(c)(iii) Task 1 of 2

// Save the text entry:

// ...get the textarea element's current value

textareaElement.value = text;

// (getting HTML input values is in Block 2 Part 2 Section 6)

// ...make a text item using the value

var textareaElement = document.createElement("textarea");

document.body.appendChild(textareaElement); //Add the element to the document

// (demonstrated elsewhere in this file)

// ...store the item in local storage using the given key

localStorage.setItem(key, Text);

};

// (local storage is in Block 3 Part 5)

}

// TODO: Q1(c)(iii) Task 2 of 2

// Connect the saveEntry event listener to the textarea element 'change' event

var inputElement = document.querySelector("textarea");

window.addEventListener("change", processFile);{

var text = textareaElement.value; //You already have the element as a variable

localStorage.setItem("key", textarea.value());

//item = makeItem("text", myText);

// (demonstrated elsewhere in this file)

}

/**

* Add an image entry to the page

* @param key Key of item in local storage

* @param url Data URL of image data

*/

function addImageEntry(key, url) {

// Create a image element

var imgElement = new Image();

imgElement.alt = "Photo entry";

// Load the image

imgElement.src = url;

// 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 text = "";

var isNewEntry = true;

addTextEntry(key, text, 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 event file input 'change' event data

*/

function processFile(event) {

// Create an event listener to add an image entry

function addImage(url) {

// Add a new image entry, using the current timestamp to make a key

var key = "diary" + Date.now();

addImageEntry(key, url);

// TODO: Q1(c)(iv) Task 1 of 2

// Make an image item using the given url

// (demonstrated elsewhere in this file)

// Store the item in local storage using the given key

// (demonstrated elsewhere in this file)

}

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

// (reading files into a data URL using FileReader is demonstrated in Block 3 Part 4)

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

inputElement.value = '';

}

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!