Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

C:UsersJackie SrbinoskiDocumentsJackieDPIT127Figure 1.jpeg Design Requirements: The heading text should be displayed within an h2 element. The button must have a width value of 100px and

C:\Users\Jackie Srbinoski\Documents\Jackie\DPIT127\Figure 1.jpeg

Design Requirements:

The heading text should be displayed within an h2 element.

The button must have a width value of 100px and a padding value of 10px.

A background colour for the button should also be specified (see Design Resources).

The following actions must occur when the Start button is clicked:

An AJAX script is called to access and read the A5_TASK1.xml file

A for loop is used to populate a table with the collected XML data (as shown in Figure 2)

A switch statement is used to display a suitable Star Rating image (see Design Resources)

An if/else if/else structure is used to set the Overall Score background colour

The table heading text should be displayed within a caption element.

The caption must have a font size of 21px and a matching bold style.

The caption should also have a top padding value of 30px and a bottom padding value of 10px.

All hyperlinks must display their destination in a new window/tab.

The table should utilise th and td elements with a padding value of 10px and a font size of 20px.

A background colour for all th elements must be applied (see Design Resources).

The table should have a matching border, field alignment and centred position on the page.

All Total Reviews and Overall Score values must be presented as shown.

An :nth-child() pseudo-class should be used to shade even table rows (see Design Resources).

The text shown beneath the table must be displayed within an h3 element.

The date should be presented in an Australian format (specifically as DD/MM/YYYY).

The decision conditions and hexadecimal colour values are provided in the table below.

Score < 7.5

7.5 Score < 8.0

Otherwise

#ff9999

#ffdb99

#99cc99

Design Resources:

1 Star Image

https://mywebspace.net.au/UOWC128/assignment_5/images/1_star.png

2 Star Image

https://mywebspace.net.au/UOWC128/assignment_5/images/2_stars.png

3 Star Image

https://mywebspace.net.au/UOWC128/assignment_5/images/3_stars.png

4 Star Image

https://mywebspace.net.au/UOWC128/assignment_5/images/4_stars.png

5 Star Image

https://mywebspace.net.au/UOWC128/assignment_5/images/5_stars.png

Background (button)

#ecf2f4

Background (th)

#b9b9b9

Background (:nth-child)

#e0e0e0

Border Effect

1px solid #808080

Please Note:

You must use all of the attribute values contained within the XML file.

Save your completed file as A5_TASK2.html.

This will be the second of 4 separate files that you must submit for this assignment.

This task is worth 4.5 marks.

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

More Books

Students also viewed these Databases questions