Task 1. Create 2 buttons on a web page: “Console Hi” and “Alert Hi”.
When the user clicks on the button “Console Hi”, display a message to the console: “Hi there! JavaScript is cool!”
When the user clicks on the button “Alert Hi”, an alert window will appear and it displays the same message: “Hi there! JavaScript is cool!”
(If you are using Chrome, to view the Console, right click on the web page and select “Inspect”, then click on the “Console” tab. If you are using Firefox, to view the Console, right click on the web page and select “Inspect Element”, then click on the “Console” tab.)
Note: When you run task1.html, the result should like the following image.
Task 2. Create 2 buttons on a web page: “Lion” and “Frog”. Below the buttons, display a text field.
When the user clicks on the button “Lion”, the text field displays “The Lion Button is clicked”. When the user clicks on the button “Frog”, the text field displays “The Frog Button is clicked”.
Task 3. Create 2 buttons on a web page: “Lion” and “Frog”.
When the user clicks on the button “Lion”, a picture of a lion is shown. When the user clicks on the button “Frog”, a picture of a frog is shown.
Note: you can use the picture of lion or frog from the Internet, or you can draw by yourself. Or you can change any pictures you like and labelling for them.
Task 4. On a web page, display an image of a lion and an image of a frog.
When the user clicks on the lion image, a message “Roar” in orange color appears on the page. When the user clicks on the frog image, a message “Ribbit” in green color appears on the page.
Task 5. On a web page, display an image of a lion and an image of a frog.
Under the images, display the following two messages.
Number of lion clicks: 0
Number of frog clicks: 0
The two messages are in orange color and green color, respectively. When the user clicks on the lion image, the lion click count is increased. When the user clicks on the frog image, the frog click count is increased.
Marking Criteria
Total mark is 100, in which, you will get 20 points for each task.
END OF THE EXERCISE
