JavaScript Assignment 1 For this assignment you are only to use external CSS and JavaScript. This assignment should have no templates or frameworks. The submission of this assignment will be of a zip file with all images, .css files, .js files, and .html files needed to make the project work correctly. Upload the Zip file to canvas by the due date. Any late assignment will receive a 10% reduction in grade for every day it is late. You are to create a child's game. The game will have a title in the head of the boilerplate with your name. The name of the game will be Fruit Game which will need to be included in the header of the browser using a h1 element. You will display an image of a fruit. Under the image there will be room for text for the name of the fruit but not displayed at the start. You will have four buttons with names for the fruits available. When the button with the fruit name is clicked the name of the fruit will appear under the image of the fruit. If the button and the name of the fruit is the same then you will change the background color for the entire browser green with text feedback saying "Correct!". If the button that was selected does not match the text of the image then the background color will change to red with text feedback that says "Incorrect". At the bottom of the browser there will be a button that will say "Play Again". When the Play Again button is selected, a new image will appear and the background color along with the text under the image will reset so the user can choose again. Task 1. Create a Header with the name "Fruit Game" 2. Display an image of fruit. The image must have a width of 50% and height of 200px. There should be padding of 20px around the image. 3. There should be text feedback under the image. The font style should be "fantasy" 4. You should have four buttons that represent the four different fruits and are labeled with the names of the four fruits. When the button is pressed it will give feedback to the correct or incorrect answer. The buttons should be spread across the viewport of the screen evenly and located below the image. The width of the button should be 200px and the height should be 50px. The font size should be medium 5. The background color should change based on the correct or incorrect response of the buttons that are chosen 6. The Play again button should be at the bottom of the browser screen. The button should reset the background color, reset the text feedback, and choose another picture to display. The width of the button should be 200px and the height should be 30px. (hint) You will use a lot of integer variables in your algorithm. Assign each image to display based on an integer that is defined in your script. The buttons should be assigned an integer based on the button that is chosen from the names of fruit. Then compare the two integers to find out if the answer is correct. Display the name of the fruit based on the integer for the image. The play again will increment the image integer 1-4. If the image integer is 4 then the next number will be 1
