HiddenNumbers | |
For this stage of the lab you will be adding in the Javascript code on your own. Add in some Javascript that will do the following:
Function generate():
On page load, generate an integer value between 0 and 100 (inclusive) and place in text box labeled Hidden Number.
Function change():
When a person clicks on your happy image, change the image to a sad face. Also change the color of your HTML tag to #1E90FF.
When a person clicks on your sad image, change the image back to your happy image. Also, change the color of your HTML tag back to its original color.
Function guess():
When a person clicks on Guess button, check to see if he/she guessed the hidden number correctly. If yes, reveal the number by changing background color to white and font color to black. Also, display a happy face. Otherwise, display a sad face. Open a window dialog box and alert the user if his/her guess was too low or too high.
Some tips for your journey into coding:
Remember that we IDed the image tag emotional_faces. Use this ID in your Javascript to change the image.
Create an ID for the HTML tag. Name it whatever you like. Use this ID in your Javascript to change the color.
You will need to use an onclick handler with your Javascript code. This is what will listen in to when a user clicks on your image or the button.
You will need to use an onload handler with your Javascript code. This is what will listen in when the document is loaded into your browser.
Your Javascript code will be written inside of the HTML tags right after the CSS style block. Your Javascript code needs to be inside of a HTML tag as shown below:
# CSS Code Here
# Javascript Code Here
This is my script so far!
body { background-color: #474A51; color: #F2F2F2; }
h1 { color: #FFFF99; font-size: 21px; }
#emotional_face { height: 75px; width: 75px; }
# Javascript Code Here
My Current Emotion
onclick="change()">
|
There are 3 Steps involved in it
See step-by-step solutions with expert insights and AI powered tools for academic success
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started