Skip to content

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.

Image 01

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.

Image 02

You can use below code as your starting point:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
  <title>Print handicaps</title>
  <script>
  let hcpdata = [{ "name": "Ari", "hcp": 54 },
               { "name": "Pasi", "hcp": 5 },
               { "name": "Seppo", "hcp": 20 }];
  </script>
</head>
<body>
    <button>Show Handicaps</button>
    <ul id="hcplist"></ul>
</body>
</html>

Exercise 03 - Evaluation tool [4p]

Look below image.

Image 03

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.

Image 04

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.

Image 05