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
Get step-by-step solutions from verified subject matter experts
