JavaScript Assignment For this assignment you are only to use external CSS and JavaScript. This assignment should have no templates or frameworks. The Fruits to be used are Apple, Orange, Pear, and Pineapple. Write the code in a way that allows it to pull the images from a folder inside the main folder named “images." The file names are as follows Apple.png, Orange.png, Pear.png, and Pineapple.png. 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
JavaScript Assignment
For this assignment you are only to use external CSS and JavaScript. This assignment should
have no templates or frameworks.
The Fruits to be used are Apple, Orange, Pear, and Pineapple. Write the code in a way that allows it to pull the images from a folder inside the main folder named “images." The file names are as follows Apple.png, Orange.png, Pear.png, and Pineapple.png.
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
Step by step
Solved in 6 steps with 4 images
