explain how your website is validating the user input on the Order Status page, and how your website is calculating the cost of a jigsaw.

C O M P U T I N G  S C I E N C E  A N D  M A T H E M A T I C S  C S C U 9 F 2          A S S I G N M E N T

Kittens are adorable and sales of jigsaw puzzles soared during lockdown. Why not combine the two: sell jigsaw puzzles with kitten motifs online. For good measure, allow users to customise their jigsaws by printing a personalised message on the kitten motif. It’s a sound business plan; investors will be queuing round the block once you show them your website. Website Your task is to create (part of) a website for selling custom-made jigsaw puzzles with kitten motifs, using HTML, CSS and JavaScript. Pay attention to the assessment criteria – they tell you what you will receive credit for. Your website must have a homepage with links to pages to • design and customise your jigsaw puzzle, • check your order status, and • contact the company. The Contact page does not need to show any content (it can simply display an “Under Construction” notice) but it must at least allow to navigate back to the home page. The Order Status page must display a sign-in form asking for a customer’s username (their email address) and password. The website should validate the form to check that the username is in the format of an email address, and that the password is at least seven characters long. If validation does not succeed, the user should be alerted with a helpful error message. If validation does succeed, the website should simply display a “Welcome” alert. The Customise Jigsaw page should let users select a kitten image and a jigsaw grid. In addition, the page should let users type a message that will printed on to the jigsaw. The page should also calculate cost of the jigsaw. A screenshot of a sample Customise Jigsaw page is provided below as an illustration. Don’t feel constrained by this – your page design may differ. Selecting motif and jigsaw grid. Users should be able to choose from different kitten motifs. A selection of images is provided in different sizes and orientations; you may add your own images to that selection. (The website requires a fixed set of motifs; image upload functionality goes beyond frontend web design and is therefore not considered.) Users should also be able to pick how difficult the jigsaw is going to be by specifying how many rows and columns the jigsaw grid should have. A selection of jigsaw grids is provided in different sizes and orientations; you may also generate your own jigsaw grids using JavaScript. Writing a message. Users must be able to type their message (up to 3 lines of text) and choose the font size (from exactly three options: small, medium and large) and font colour (from at least three options). © University page 2 of 5 Viewing the jigsaw. User must be able to view the final jigsaw design, that is the kitten motif, their message printed on the image, and the jigsaw grid printed over the entire image. The text, font colour and font size of the message on the jigsaw should change when the user updates the text or changes the settings; change may happen immediately, or when the user clicks to update the display. You may also offer the user a way to move the message to a different position on the kitten image. Calculating the cost. Users must be informed how much the jigsaw will cost, which depends on the cost of printing the image and on the cost of cutting the jigsaw pieces. The web site should display the total cost and the cost breakdown either on the page, or it should pop up an alert with this information on request (e.g. when a Calculate button is clicked). See the screenshot below for an example. For the purpose of calculating the cost of printing the image, 1 square centimetre costs 1 pence. You should assume that the dimensions of the provided images (when printed) are 20cm x 20cm for the smaller square images, and 20cm x 30cm or 30cm x 20cm for the bigger ones in portrait or landscape orientation. If you use your own images, you must make sure to provide images in different sizes and orientations. For the purpose of cost calculation, you should assume the same print sizes as above. The cost of cutting the jigsaw pieces depends on how much cutting needs to be done after printing. Approximately, this corresponds to the number of rows and columns, and to their length. You should assume that cutting 1 centimetre costs 4 pence. Thus, if r is the number of rows, c the number of columns, w the width of the printed jigsaw (in centimetres) and h the height, the cost of cutting the jigsaw is 4 * ((r-1) * w + (c-1) * h) pence. © University page 3 of 5 Note that you do not need to design buttons and forms for actually ordering a jigsaw puzzle. Order functionality goes beyond frontend design and can’t be implemented solely in HTML, CSS and JavaScript. Therefore, this aspect of website design is omitted here. Report In addition to the website, you must write a short report describing your website. Your report should consist of a cover page stating the module code and your student number (but not your name). The report should be about two to three pages long, excluding the cover page. The body of the report should consist of two sections. 1. The first section should briefly describe your website and illustrate each page with a screenshot. 2. The second section should explain how your website is validating the user input on the Order Status page, and how your website is calculating the cost of a jigsaw. You should reproduce the relevant code of your website alongside these explanations.