Create a page that displays an image, and uses JavaScript

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: 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

Most Recent Questions


Helping Students for Excellence in Academics, GET Help with Assignment? Order Now