Web Application Development

Individual Work: 10%

Submit your work on Canvas by11:59 pm 9th April, 2018

Introduction

In this assignment, you will demonstrate that you have the basic understanding of the core

client-side technologies (HTML, CSSand JavaScript) and are able to create aHTML pages with

desirable style and certain interactive features. You will be given a small start file set, which

contains a complete CSS file and a skeleton HTML file. Your task is to produce an online

bookstore Web page that implements the below requirements without using any third-party CSS

frameworks or JavaScript libraries.

Main Requirements

The following functionalities must be implemented in your Web page:

• The main page should display the main information of each book including a

thumbnail picture, title, author, year, price, publisher and category. (See Figure 1 as

an example).

• End users can search books with their titles. The rows that match the search term will

be highlighted with a colored background. (see Figure 2 as an example)

• End users should be able to filter books through their categories. The list of category

works like a dropdown and should cover an extra category that is currently not in the

bookstore for boundary test use. Meanwhile, end users should always have the option

to return to the default status (display all books no matter which category they

belong to).(see Figure 3 as an example)

• The functions of the search and filter should be able to work together and combine

the result of each other. (See Figure 4 as an example).

End users should be able to select books and add them to the “Shopping Cart” through

the checkbox ahead of them with the button “Add to cart”.

• End users can clear the shopping cart through the “Reset the Cart” button. Users

COMP5347 Assignment 1

Page | 4

should be prompted with a message box to confirm their desired action (“Reset the

cart” or “Cancel”).

• The “Shopping Cart” should always show the correct number of books in the cart

based on the end user actions (see Figure 5 as an example)

Design and Implementation Requirements

The online book store data and required thumb images are prepared in the zip file. The layout

does not have to be the same as the example in Figure 1. For instance, you may modify the

given CSS file to have slightly different color scheme, border and text styles.

You should consider the behavior of boundary cases and design suitable UI changes to notify

the end users (e.g. an alarm). Sample boundary cases include, but are not restricted to the

followings:

• Search term does not appear in any title

• Users select thecategory that doesnot containanybooks

Each function mentioned above should work on the output of other functions.

Make sure that your HTML, CSS rules and JavaScript code are kept in separate files. Inline style

or JavaScript code is not accepted.

Make sure that your HTML and CSS files are “clean” enough. They should not contain any

unnecessary automatically generated content such as scattered <span> element with pieces of

styles.

Use of jQuery or other JavaScript library is not allowed in this assignment.

Use of Bootstrap or other CSS framework is not allowed either.

Mark Distribution

• Static features ( 4 marks)

– 2 marks for having all HTML elements and structure as per the main requirements

– 2 marks for applying similar CSS styles as per the main requirements

• Interactive features (6 marks)

– 1 mark each for normal search function

– 1 mark for normal filter function

– 1.5 mark for combining the search and filter functions

COMP5347 Assignment 1

Page | 5

– 1.5 marks for the cart functionality

– 1markforboundary cases