Exercises 3 : DOM (24p)
Remember use JAMK/GitLab to return your exercises. Student need to test that exercise really work.
Exercise 01 - Images [4p]
Use HTML/CSS and JavaScript to create a web application, which display a different "images" when a IMAGE-1
etc. texts are clicked. First image are visible by default. A few images are enought.
Exercise 02 - List items [4p]
Create a web page with HTML/CSS and JavaScript. You application should display golf player handicaps when a button is clicked. Handicaps are stored a array named hcpdata
.
You can use below code as your starting point:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
Exercise 03 - Evaluation tool [4p]
Look below image.
You need to create a JavaScript based web application which teacher can use to evaluate student work. Student work contains four test. Student total points and grade are visible automatically when a test points are given.
Use below values:
- points 00-12 => grade 0
- points 13-15 => grade 1
- points 16-17 => grade 2
- points 18-19 => grade 3
- points 20-21 => grade 4
- points 22-24 => grade 5
Tip
You can use onBlur
event with input
element to call automatically calculate()
function (you will need to do it).
Exercise 04 - Todo [6p]
Create JavaScript based SimpleToDo application, which shows a todo items in a list. Todo list is empty when web page are launched. A new todo can be added by pressing a Add
button. A new todos are added with li
elements. All todos can be removed by pressing a Remove List
button. A single todo is removed if it is pressed. Use addEventListener
function to remove a single todo.
Exercise 05 - Party [6p]
Use JavaScript to create a web app with following requirements:
- Select a party color only change color text value in result area not background color. You can define for example three different colors to
select
element.<option value="#ff0">Red</option>
. - Text typed in "What Party?" textbox will be visible in result area letter-by-letter in real time. Numbers are not allowed.
- Selected color will be changed to result area when a Change a choosen background color button is clicked.