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
Reviews
There are no reviews yet.