Reference no: EM133140203

INFT 1024 Information Technology Fundamentals - University of South Australia

Assessment - CSS + JavaScript

This CA has two parts. First, create a page that displays an image, and uses JavaScript to allow the user to select which image is displayed. Secondly, use JavaScript to give the user the option to toggle the styling on your page.

Tasks

Select image using JavaScript
This CA requires you to create a HTML page incorporating JavaScript and CSS. Your HTML must include:
1. A correct document type,
2. Correct use of 'head' and 'body' elements,
3. Semantic HTML elements (e.g. 'main'),
L. One 'img' and one 'p' element. The 'img' should appear above the 'p' when viewing the webpage.
5. 5 'button' elements. Each button corresponds to one of the images, listed in the table below. The text shown in each button should be the birds name.
When the page is first viewed, one of the image/text combinations from the table below must be shown, using the 'img' and 'p' elements in your HTML. (You may choose any of the birds as the default image).

Button Name Image Text
Pardalote Pardalote by fir0002 (CC-by-NC)
Purple Swamp Hen Purple swamp hen by Toby Hudson (CC-by-SA) White-headed Stilt White-headed Stilt by JJ Harrison (CC-by-SA) Inland Thornbill

Inland Thornbill by Peter Jacobs (CC-by-SA) Rose Robin Rose Robin by JJ Harrison (CC-by-SA)

You need to include some JavaScript code to make your buttons interactive. When a user clicks one of the buttons, you need to make two changes to the page:
1. Change the displayed image to to the corresponding bird,
2. Update the 'p' element to display the photographer.
Notes: Your HTML must not contain 5 img elements.

CSS Toggle button
You are required to style your HTML page using two themes, and provide a button to toggle between them. To do this, you'll make two variables with the same name in different CSS selectors. For example:

:root {

--primary-color: rgb(255, 255, 255);

}

 

[data-theme="dark"] {

--primary-color: rgb(0, 0, 0);

}

This gives two different values for the same variable. You'll need to style the page using this variable (for example, style the heading color using `primary-color`. Refer to the CA3 if you can't remember how to do this).

To toggle between the two themes, you'll need to store a data attribute in the root HTML node. The CSS Learning Activity will guide you on this process. Additionally, this page shows the JavaScript method to set an attribute .
The steps you need to work through are:

1. Create two color palettes in your CSS. There must be 5 colors in each. You can choose any color values you like. The required variable names for your colors are:

primary-color

secondary-color

bg-color

font-color

2. Write a JavaScript function that runs when the 'Toggle Theme' button is pressed. The function should set the value of the 'data-theme' attribute to 'light' or 'dark', whichever is not currently selected.

Attachment:- Information Technology Fundamentals.rar