This assignment builds on the knowledge you are gaining (or have gained) in the last 4 computer practical sessions in this course but it does require you to do more self-directed learning and engage in more complex topics, so start early, leaving it for the last-minute may cause undue stress.

In this Assignment, create a cool home-page.

The repository MUST have a README.md file explaining what the web-page is about. There are marks associated with the README file so give your best (This link will help: https://www.freecodecamp.orgews/how-to-write-a-good-readme-file/).

The instructions below provide details on what MUST be present in your web-page.

HTML

The HTML of your web-page MUST include:

1. A correct document type,
2. Correct use of 'head' and 'body' elements,
3. Semantic HTML elements (e.g. 'main'),
4. One'img' andone'p' element. The 'img' should appear above the 'p' when viewing the webpage.
5. 5 'button' elements where each button corresponds to an image. For example, it can be images listed in the table below. The text shown in each button should be a sensible image name.

When the page is first viewed, one of the image/text combinations from the table below (or whatever you choose) must be shown, using the 'img' and 'p' elements in your HTML. (You may choose any of the images (birds) as the default image).

Button Name	Image	Text
Pardalote	http://www.outgrabe.net/bird00.jpg	Pardalote by fir0002 (CC-by-NC)
Purple Swamp Hen	http://www.outgrabe.net/bird01.jpg	Purple swamp hen by Toby Hudson (CC-by-SA)
White-headed Stilt	http://www.outgrabe.net/bird02.jpg	White-headed Stilt by JJ Harrison (CC-by-SA)
Inland Thornbill	http://www.outgrabe.net/bird03.jpg	Inland Thornbill by Peter Jacobs (CC-by-SA)
Rose Robin	http://www.outgrabe.net/bird04.jpg	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 image (bird),
2. Update the 'p' element to display the photographer.

Use the following HTML as the basis for your web page.(SEE THE PHOTO ATTACHED)

Irrespective of the content of the web-page, the web-page you create in this Assignment MUST be a dynamic web-page,where there are two things your webpage MUST implement:

1. A button which allows the user to toggle between a light- and dark-mode. This button must change the CSS used within the page.
2. An input which allows the user to enter their name. The name should be reflected in the heading.

Both of these tasks will require you to store data in thelocal storageof the browser, so that the user choices and inputs are reflected when the page is reloaded. The instructions would help you achieve all of this step by step.

Dynamic Theme Toggle

You are going to implement two themes and a button to toggle between them. you'll make two variableswith the same namein 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`.)

To toggle between the two themes, you'll need to store adata attributein the root HTML node.This link will assist you: https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute.

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, but the variable names need to be:
   • primary-color
   • secondary-color
   • bg-color
   • font-color
   • heading-color
2. The two palettes must be placed in different CSS rulesets. One should be placed in `:root`, and the other in a ruleset with the selector: [data=theme="dark"]
3. make 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.

Dynamic Heading Update

You need to show the user's name in the heading. The heading should say 'Hello, ', when the user enters their name into the text box and presses the button.

However, pressing the button will cause the page to navigate to a different URL. (Try it: you'll see the URL change when the user enters input). This is because the button submits the text box content as a form, to the page. The page then reads the contents of the form as key-value pairs from the URLquery string, which is the bit of the URL after the '?'.

To display the user's name, you'll need to read the user's name from the query string.This link will help you: https://www.sitepoint.com/get-url-parameters-with-javascript/.

To implement this, you need to read the query string when the page is loaded, not when the button is pressed. you need a function for the `onload` event.This link will help you: https://www.w3schools.com/jsref/event_onload.asp.

The steps you need to work through:

1. make a function that updates the heading, by reading the query string to find the user's name.
2. Use the function in a suitable element's `onload` property.

Storing Data in the Page Storage

The final step is to use the browser's local storage to remember the user's theme preference and name.

This link will help you: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage.

The steps you'll need to work through are:

1. When the page loads, read the local storage. If there's a theme preference stored there, you should update the page to display whichever theme (light or dark) the user last selected.
2. When the theme changes, you'll need to remember the setting, by storing it in the local storage. Choose a suitable key name and data value.
3. When the page loads, check if the query string contains the 'user_name' field. If it does not, you should check if a name is stored in the browser's storage, and use any stored value you find.
4. When the page loads, you should check if the query string contains the `user_name` field. If it does, you should store this value in the local storage.

Transcribed Image Text:

<!DOCTYPE html> 1 2 <html> 3 4 5 <head> <meta charset="utf-8"> <title>My page title</title> <link rel="stylesheet" href="base.css"> <script> </script> 6 7 8 9 10 </head> 11 <body> 12 13 14 15 16 17 18 19 20 2222222222223 <header> <h1>Header</h1> <button onclick="">Toggle Theme</button> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Our team</a></li> <li><a href="#">Projects</a></li> </ul> <form> <li><a href="#">Contact</a></li> <input type="text" name="user_name" placeholder="Enter your name!' <button type="submit">Apply!</button> </form> </nav> <main> <article> <h2>Article heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. <!DOCTYPE html> 1 2 <html> 3 4 5 <head> <meta charset="utf-8"> <title>My page title</title> <link rel="stylesheet" href="base.css"> <script> </script> 6 7 8 9 10 </head> 11 <body> 12 13 14 15 16 17 18 19 20 2222222222223 <header> <h1>Header</h1> <button onclick="">Toggle Theme</button> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Our team</a></li> <li><a href="#">Projects</a></li> </ul> <form> <li><a href="#">Contact</a></li> <input type="text" name="user_name" placeholder="Enter your name!' <button type="submit">Apply!</button> </form> </nav> <main> <article> <h2>Article heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit.

Answer rating: 100% (QA)

Heres a breakdown of the information in the image HTML Structure The webpage should include the foll... View the full answer