Assignment Detail:- 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-
Parts
Select image using JavaScriptThis 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 TextPardalote 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 buttonYou 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:
2- Style your HTML using the CSS colors you've created-
3- Add a button to your page that will allow the user to toggle the CSS theme-
Attachment:- Information Technology Fundamentals-rar
Most Recent Questions