Background

In Block 1 you developed a prototype web application for Erehwon Guest House, for managing enquiry information, and reported on web architecture and security.

Mike continues to be enthusiastic about embracing web technologies and has had an idea for an online journal or diary for his guests. For many years they have recorded their thoughts about their stay in a paper ‘guest book’, which is kept in the guest house and allows people to share their experiences and read what previous guests have written. Mike has realised that he could use testimonials like these on his website to promote his guest house.

To encourage his guests to document their stay, Mike would like to offer them a ‘guest book’ web application in which they can record a simple diary of text and photos, using a smartphone, tablet or laptop computer. It is expected that the guests will use their own devices. Mike could then share diary entries on the guest house website.

Demonstration app

A first demonstration version of this application has been developed, which gives an impression of what it would be like for guests to use.

When the application starts, it creates some demonstration diary entries and shows these on the page. These can be edited or deleted and new text and photo entries added, but these changes are not retained; each time the application starts (i.e. each time the page is reloaded), it goes back to the way it was before. Further, the application always adds the same ‘dummy’ photo.

Mike is impressed with this demonstration app, and has asked for more work to be done to develop it further.

From demonstration to prototype

Your first task (namely Part 1 of the TMA) is to develop this demonstration app into a more functional prototype app. Specifically, you need to:

improve the appearance of the app on different devices

make it retain changes made to diary entries

• allow users to add their own photos.
• Like other examples in this block, the demonstration app is provided as a HTML file linked to CSS and JavaScript files that are necessary for the application to work. You must work with the files provided with this assignment and should edit only the parts of the files you are explicitly asked to change.
• Part 1: Produce a prototype diary app

The following information is to help you understand how this web application works before you go on to make changes to it.

The demonstration app 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 app 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 (<section> elements added to the page for the user to view and edit these entries).

• The app 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 app, you will see that it contains a <main> element with two <section> elements, but when it is in use, more <section> 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 app 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.
• (b) Add style to the application

(i) Improve the appearance of diary entries

Edit the CSS rules in ‘tma03.css’ to make the diary entries more visually distinct from each other.

(5 marks)

Mike has shown the demonstration app to some friends and they find that it is difficult to tell the entries apart. Mike feels that this problem could be addressed by making diary entries more distinct from each other, e.g. by adding borders or padding, or increasing the contrast of the colours used.

Make some minor changes to the CSS to improve its appearance in this respect. You should not change the HTML to achieve this.

• In your solution document, provide your amended code and a screenshot showing the new appearance of the diary entries.
• Making and testing this change

First, try using the application, adding and removing diary entries. Use your browser developer tools to see what HTML elements are initially on the page and are subsequently added to the page, and explore the CSS rules that apply to each part.

Open the CSS file in your text editor and read the comments that explain the purpose of each CSS selector and rule. Identify the rules that affect the general appearance of diary entries.

Plan and make your changes to the CSS, which you should see take effect as soon as you reload the page.

(ii) Arrange diary entries to suit screen size

Edit the CSS rules in ‘tma03.css’ to arrange the diary entries responsively, in rows or columns.

(15 marks)

The demonstration app presents each entry in its own row – each entry takes the full width of the viewport. This looks OK on a small mobile screen but does not work well on other sizes of screen that Mike expects his guests to use. Mike has said he would like the prototype app to arrange diary entries in rows or columns ‘a bit like Post-it notes’ (see Figure 1).

Figure 1 Different coloured Post-it notes arranged on a wall

Apply a technique (or a combination of techniques) to arrange the diary entries appropriately on different sized screens. Choose from the CSS techniques you have encountered in this block for arranging content in response to screen size. You should not change the HTML to achieve the desired result.

In your solution document, provide your amended code and screenshots demonstrating the new arrangement of the diary entries for two different types of device.

In addition, explain in no more than 150 words how the technique(s) you have selected work to arrange content, and briefly justify why your choice is appropriate for this scenario.

If you find there are ‘edge cases’ where your page does not look in the way you intend, you should make a note of these in your solution document rather than spend a long time trying to fix them. This text would not count as part of the word limit for your explanation above.

Making and testing this change

The brief is for diary entries to appear ‘like Post-it notes’ arranged in rows or columns. You can assume that users will not type too much in their diary entries – no more than in the demonstration entries so diary entries will be quite square. Another name for this type of arrangement is a ‘tile layout’, like square tiles on a kitchen wall or a chess board.

The CSS file contains some hints on how to achieve this:

main {     /* Apply style rules to the diary container here? */ } section {     /* To make sizing easier, include borders or padding in width */     box-sizing: border-box;     /* Set a limit on entry widths? */ }

You have explored some CSS techniques for arranging content. Choose one of these and add some CSS rules to see their effect:

first try to control the shape of the <section> elements,

then add CSS to control how these elements are arranged,

then add CSS to respond to different screen sizes if required.

You may need to try a few different approaches before settling on one you’re most happy with.

Choose what size of screens you expect guests to use while staying and provide screenshots. There is no single perfect solution – the app just needs to look more or less as you intend on the sizes of screen you choose to demonstrate. You do not need to change the position of the ‘Add entry’ and ‘Add photo’ buttons – these are in <section> elements and can continue to be presented like diary entries that are buttons.

(c) Complete the functionality

Each of the following sections ((i)–(iv)) is more challenging than the one before, so you are advised to balance the time you spend on each against the marks available.

Remember that you do not need to complete all the sections of step (c) of this part before you complete Part 2 of the assignment. It is better to leave a section if you get stuck, and come back to it later if time allows.

If you cannot complete a section, there is still credit available for providing in your solution document a step-by-step explanation of what you are trying to do.

(i) Remove demonstration code

Edit the script in ‘tma03.js’ to disable code which adds demonstration entries to the diary.

(3 marks)

The demonstration app adds items to local storage when it starts that are not required in the prototype app. Comment out or remove the JavaScript that adds them, as a first step to preventing these entries appearing on the page.

In your solution document, provide your amended JavaScript code.

• Note: in answering this question you must not change any code in ‘tma03-demo.js’, nor attempt to include the contents of this file in your solution document.

Making and testing this change

• Find and disable the JavaScript code that adds items representing the four entries to local storage, when the application starts. You must disable the code that adds items to local storage, not the code that reads local storage and adds HTML elements to the page – that is needed for the application to work
• Be aware that after the first time you use the demonstration app, even after you complete this change, the items representing these four demonstration entries may already be present in local storage. If so, you will still see them in the ‘Application’ or ‘Storage’ tab of your browser developer tool. Until these demonstration items are deleted, the demonstration entries will continue to appear on the page when the application starts.

The demonstration diary entries are quite useful for creating and testing the rest of the application’s functionality, so you could delay carrying out this task until you have attempted the other work described in sections (ii)?(iv).

(ii) Delete entries

Edit the script where indicated in ‘tma03.js’ to delete an entry from local storage when it is removed from the DOM.

(5 marks)

The demonstration app adds a ‘Delete entry’ button (labelled with an ‘X’) to the HTML element containing each entry, which removes that element from DOM when the button is clicked. Add JavaScript code where indicated to also remove the corresponding item from local storage, so that when the application next starts the deleted entry does not reappear.

In your solution document, provide your amended JavaScript code.

Making and testing this change

The code to change is indicated as follows:

// TODO: Q1(c)(ii)  // Remove the item from local storage by key

Read the code and comments above these lines to see what variables exist at this point in the code. Use what you have learned from Block 3 Part 5  to complete the code to remove the item from local storage.

One way to approach this task is using the JavaScript debugger, as seen in Block 3 Part 4 Activity 3 and earlier in Block 2.

When this task is complete, you will be able to delete the demonstration entries from the page and see the items representing them disappear from the ‘Application’ or ‘Storage’ tab of your browser developer tools – although you may want to keep one for the next section of step (c).

(iii) Save text entries

Edit the script where indicated in ‘tma03.js’ to store each text entry in local storage when it is edited.

(8 marks)

The demonstration app allows users to add text entries to the page, but they are not saved. The prototype app should save diary entries as they are typed, so that they reappear when the application is restarted. Add JavaScript code where indicated to achieve the following:

Task 1: make a text item representing the current value of the text area and

store this item in local storage.

Task 2: execute the event listener you completed in Task 1 when the text input changes.

In your solution document, provide your amended JavaScript code.

Making and testing this change

Inspect a text entry in the page to see what HTML elements it is made from. If you have deleted all the diary entries, you may reinstate the demonstration code to create them again.

When the ‘Add entry’ button is clicked, HTML elements including a <textarea> are added to the page. When users edit the text in this HTML element, it changes on the page, but that change is not saved.

This change is to ensure that when each <textarea> element is added to the page, an event listener is added to it which will update local storage when its value changes. A <textarea> works like an <input> element that allows multiple lines of text.

Task 1: The code to change is indicated as follows.

// TODO: Q1(c)(iii) Task 1 of 2   // Save the text entry:  // …get the textarea element’s current value  // …make the text item using the value  // …store the item in local storage using the given key

Read the code and comments above these lines to see what variables exist at this point in the code and how textAreaElement is created and its initial value is set. Bear in mind that the application already has or had code to make a text item and store it in local storage – this is how the demonstration entries came to exist. All you need to do is provide the key and text value.

Task 2

The code to change is indicated as follows:

// TODO: Q1(c)(iii) Task 2 of 2 // Connect the saveEntry event listener to the textarea element ‘change’ event

Use what you have learned in Block 3 Part 4  to connect the event listener. There are further hints in the code and comments.

When this change is complete, you will see items change in the ‘Application’ or ‘Storage’ tab of your browser developer tools after you type text on the page, and move the focus away from the text input (e.g. by pressing the Tab key on your keyboard or clicking elsewhere on the page). When you reload the page these entries will reappear on the page.

(iv) Add photo entries

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.

(9 marks)

When the ‘Add photo’ button is clicked, the demonstration app 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 app 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.

In your solution document, provide your amended JavaScript code.

Making and testing this change

• There are two main outcomes here: for a user to be able to add an image of their choice to the page, not the dummy image every time (Tasks 2), but first to ensure that this data is saved to local storage, in a similar way as you have done for text entries (Task 1).
• Task 1
• The code to change is indicated as follows:

// TODO: Q1(c)(iv) Task 1 of 2  // Make an image item using the given url  // Store the item in local storage using the given key 

As with earlier tasks, read the code and comments above these lines to see what variables exist at this point in the code. Bear in mind that the application already has or had code to make an image item and store it in local storage – this is how the original demonstration image entry came to exist. All you need to do is provide the key and data URL.

When Task?1 is complete, when you add an image you will see items change in the ‘Application’ or ‘Storage’ tab of your browser developer tools, and when you reload the page the entry will reappear on the page, until you delete the entry with its ‘X’ button. The image will always be the ‘dummy’ image.

Task 2

This task involves applying what you have learned about using a file input to obtain image data in Block?3 Part?4. Just as in the practical activity you completed in Part 4, there is a hidden file input to allow the user to choose an image, connected to an event listener. However the event listener is incomplete and does not use the event variable it receives.

The JavaScript code to change is indicated as follows:

// TODO: Q1(c)(iv) Task 2 of 2  // Complete this function to read a file when it is selected: // …then call addImage using the data URL you obtain // …and comment out line above using window.DUMMY_DATA_URL

The code that adds a dummy image entry to the page uses a data URL, which is encoded binary image data. In Part 4 you used FileReader to read an image file into a data URL. Copy and adapt the code from this practical activity to work with the diary app, using the data URL obtained from the file input event to add an image entry instead of the dummy data URL.

When Task 2 is complete, clicking ‘Add Photo’ and choosing an image will add it to the page as a diary entry, and when you reload the page this entry will reappear on the page, until you delete the entry with its ‘X’ button.

Note: to avoid running out of storage space, test using small images, for example those provided with the TMA 03 files.

If you have completed sections (i)–(iv) then well done; the prototype app is now ready to go!I 

I have added the relevant files in a zip folder.