(Solved): Task 3: Create the HTML and CSS code needed to reproduce this web application interface (see Fiqur ...

Task 3: Create the HTML and CSS code needed to reproduce this web application interface (see Fiqure 1). Extend your code by including the JavaScript functionality listed in "Design Requirements". You must use the same layout and inclusions as shown within the interface imagery. Design Requirements: - The heading text should be displayed within an h2 element. - An image must be used to show the current state/status of the game (see "Design Resources"). - The three input elements featured directly beneath the image should: 1. Contain a width of \( 110 \mathrm{px} \) and height of \( 80 \mathrm{px} \) along with a font size of \( 50 \mathrm{px} \) 2. Show a matching border, colouration (see "Design Resources"), alignment and bold styling 3. Include a border radius of \( 25 \mathrm{px} \) and a margin of \( 20 \mathrm{px} \) 4. Be set to read only so that any displayed values cannot be altered by the user - A label element must be used with the text description for the "Enter a number..." field. - An arial-16px font along with a line height of \( 23 \mathrm{px} \) should be applied to the abovementioned label. - The user's input must be collected within an input element that: 1. Contains a width of \( 150 \mathrm{px} \) and height of \( 80 \mathrm{px} \) along with a font size of \( 50 \mathrm{px} \) 2. Show a matching border, colouration (see "Design Resources"), alignment and bold styling 3. Include a border radius of \( 5 \mathrm{px} \), a margin of \( 10 \mathrm{px} \) and an a utofocus attribute - A button labelled "Start" should be included and styled as follows: 1. Contains a width of \( 100 \mathrm{px} \) and a padding of \( 10 \mathrm{px} \) 2. Shows a matching border and colouration (see "Design Resources") 3. Includes a border radius of \( 5 \mathrm{px} \) - The following actions must occur when the "Start" button is clicked: 1. The user's input is validated If the input is valid: 2. Three unique random numbers between 1 and 10 (inclusive) are generated 3. Each number is displayed within one of the three input elements (1 number per element) 4. A check is performed to see if the user's input matches any of the unique random numbers 5. The image is altered to indicate the result (see Fiqure 2 and Fiqure 3 ; see "Design Resources") 6. An audio file is played if a match is found (see "Design Resources") If the input is invalid: 2. The image is altered to indicate the result (see Fiqure 4; see "Design Resources") 3. No subsequent actions are taken "A "pointer" CSS cursor effect should be applied to all label elements and interface buttons.