JavaScript-Courses/script.js at master · AndreyKrotkikh/JavaScript-Courses · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
let teachers = [{
  name: "Ilia",
  age: 30,
  gender: "m",
  status: "Free",
  available: true,
}, {
  name: "Tim",
  age: 39,
  gender: "m",
  status: "On duty",
  available: false,
}, {
  name: "Marina",
  age: 9,
  gender: "f",
  status: "Ready to teach",
  available: true,
}, {
  name: "Klivden",
  age: 42,
  gender: "m",
  status: "Leeeroy Jenkins!"
}, {
  name: "Ivan",
  age: 17,
  gender: "m",
  status: "Ready to teach",
  available: true,
}];

function render(table, users) {
  for (let user of users) {
    let { name, age, gender, status, available } = user;

    let cssClasses = [];
    let attributes = [];


    switch(available) {
      case true:
        cssClasses.push('available');
        break;
      case false:
        cssClasses.push('unavailable');
        break;
      default:
        attributes.push('hidden');
    }

    if (gender === 'm') {
      cssClasses.push('male');
    }
    if (gender === 'f') {
      cssClasses.push('female');
    }

    if (age < 18) {
      attributes.push('style="text-decoration: line-through;"')
    }


    table.tBodies[0].insertAdjacentHTML('beforeEnd', `
      <tr class="${cssClasses.join(' ')}" ${attributes.join(' ')}>
        <td>${name}</td>
        <td>${age}</td>
        <td>${gender}</td>
        <td>${status}</td>
      </tr>
    `);
  }
}

let table = document.querySelector('.js-teachers');
render(table, teachers);