Part 1: Produce a prototype diary application The following information is to help you understand how this web application works before you go on to make changes to it. The demonstration application consists of four connected files, a HTML file with the page structure, a CSS file that styles the page, a JavaScript file that adds content to the page dynamically, and a second JavaScript file containing demonstration image data. The application records a sequence of two types of diary entries: a block of plain text an image encoded as a data URL. These entries are encoded as JSON strings and stored using the local storage Web API. It is important to distinguish between diary items (data in local storage representing diary entries) and HTML elements (

elements added to the page for the user to view and edit these entries). The application is mostly complete, in that it contains code to: make the Add entry and Add photo buttons add HTML elements for new entries to the page delete HTML elements from the page: hover over an entry to see its Delete entry (X) button. If you compare the HTML file in your text editor with that in your browser developer tools when using the application, you will see that it contains aelement with twoelements, but when it is in use, more

elements are added. This happens because the JavaScript code does the following when the page loads: adds items representing four entries to JavaScript local storage reads items from local storage and adds corresponding HTML elements to the page. You can see the four items in local storage in your browser developer tools, using the Application or Storage tabs in Chrome or Firefox, respectively. If you delete the items and reload the page, the application will put them back. If you disable the code that adds these items and reload the page, the page will continue to show the entries read from local storage until you remove them. As with the local storage activity in Block 3 Part 5, these files may be used on your computer (if your browser security settings do not prevent access to local storage from file:// URLs) or uploaded to the TT284 server and used from there.