Page $1,$ Homepage, index.html: A page to offer site navigation and a list of books to sell. You are required to include a navigation bar, consisting of three elements, 'Home', 'About Us$\text{'},$ and 'Contact Us$\text{'}.$ You are not required to develop 'About Us$\text{'}$ and 'Contact Us$\text{'}$ pages.

Choose your favourite books $($at least four$),$ each book must contain two columns, Column $1)$ face image, Column $2)$ a short introduction and a 'Pay' button.

Page $3$ of $11$

WEB DEVELOPMENT: Assessment Specification

Responsive Design: Your book list should be in two$-$column format on desktop view, but single column on tablets or smartphones, see examples in Figure $1$ and Figure $).$ Your design does not nesessarily have to be the same appearance in Figure $1$ and Figure $2,$ but take responsiveness into consideration. This will be reflected in your css design.

Pay $]$

Figure $1.$ an example of homepage in Desktop View

Figure $2.$ An example of homepage in smartphone view

Please note: You will be rewarded extra marks for responsive nav design, like that in Figure $3.($you will learn this in the Lab session$).$

Page $4$ of $11$

WEB DEVELOPMENT: Assessment Specification

Figure $3.$ A professional way for nav design in smartphone view

B$.$ Page $2,$ pay.html: A page to accept user's credit card details. An example is shown in Figure $4.$

The intention behind the web page is that a user will put in their credit card details. The user will then click on "Continue" and the credit card number $($in this case, "Mastercard"$)$ will be checked by a JavaScript code. Amongst other things this JavaScript code will check $(1)$ the total number of entered digits for credit cards is $16,$ and $(2)$ the MasterCard number starting with $51,52,53,54,$ or $55,(3)$ the card is not expired, $(4)$ the total number of digits for security code is $3$ or $4.$ If the JavaScript check is unsatisfied, users are asked to re$-$fill in the form. On passing validation, use JavaScript to send a POST request to the server $($

mudfoot.doc.stu.mmu.ac$.$uk$/$node$/$api$/$creditcard$).$ The server expects raw JSON to be sent in the following format:

$\{$

"master$\_$card": $5222123412341234$

"exp$\_$year": $2025,$

"exp$\_$month": $11,$

$"$cvv$\_$code": $089"$

$\}$

Make sure that your JavaScript can handle errors coming back from the server $($e$.$g$.,$ if the wrong data is sent$).$ This is another layer of validation.

On success from the server$).$ parse the response and provide a success message to the user