ACS-2909 Webpage Design

Instructions The goal of this assignment increases your understanding of asynchronous communication and the JSON format. Interaction Explanation Create a page that uses XHR to communicate with an external URL and retrieve values in JSON and generate colour swatches based on the returned values. Include a button on the page that says “Request Swatch”. Clicking the button will trigger a GET XHR request to the colors.php file located below. You must include a url parameter called passcode with a value of santa! You must include your UofW username, which is the characters before your university email address. It must be included as a URL parameter called username You must take the response (JSON) and create a new color swatch box The URL for the colors is https://acs2909.lusciousorange.com/colors.php Color Swatch Box Specifications The background color should match what is returned from the server. The text inside the box should be the name of the swatch. Each box must be 200x200 pixels, which means the background colour as seen by the user is 200x200. We don’t want the text touching the edge, so make sure there’s 10px of padding on it. Boxes should have 20px margin between them, so they don’t touch. The titles of the colors must be in white. The boxes should sit next to each other and continue to spill over, left to right as more are added. They should spill to new lines if needed. Each time you press the button, another swatch is generated and added to the page. Failed Request Testing We should also test what a failed request looks like. ? Create a second button on your page that says “Request Failure” ? Clicking on the second button will trigger a different XHR request to the colors.php url but without the passcode. ? Your code must detect the error and present the error message in a