java-basic-2023-03/L22-webOrigins2/classwork.html at d6d6b144bf846ef6658fe5daf83645339341cfe1 · OTUS-Java-Basic/java-basic-2023-03 · 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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Список студентов</title>
    <style>
        h1 {
            color: steelblue;
        }

        form {

        border: 1px solid steelblue;
        width: 650px;
        border-collapse: collapse;
        margin-bottom: 30px;
        }

        label {
        display: inline-block;
        width: 120px;
        font-weight: bold;
        }

        input[type="text"],
        input[type="date"],
        select {
        width: 100%;
        margin-bottom: 10px;
        border: 1px solid steelblue;
        box-sizing: border-box;
        }

        button {
        padding: 10px 20px;
        background-color: steelblue;
        color: white;
        border: none;
        cursor: pointer;
        }

        table {
        border: 1px solid steelblue;
        width: 650px;
        border-collapse: collapse;
        margin-bottom: 300px;
        }

        th, td {
        border: 1px solid steelblue;
        }

</style>
</head>
<body>
<h1>Список студентов</h1>

<form id="studentForm">
    <label for="name">Имя студента:</label>
    <input type="text" id="name" name="name" required><br>

    <label for="birthdate">Дата рождения:</label>
    <input type="date" id="birthdate" name="birthdate" required><br>

    <label for="gender">Пол:</label>
    <select id="gender" name="gender" required>
        <option value="мужчина">Мужчина</option>
        <option value="женщина">Женщина</option>
    </select><br>

    <button type="button" onclick="addStudent()">Добавить</button>
</form>

<table id="studentTable">
    <thead>
    <tr>
        <th>Имя</th>
        <th>Дата рождения</th>
        <th>Пол</th>
        <th>Возраст</th>
    </tr>
    </thead>
    <tbody>
    <!-- Здесь будут добавляться строки с данными студентов -->
    </tbody>
    <tfoot>
    <tr>
        <td colspan="3">Средний возраст студентов</td>
        <td id="averageAgeCell"></td>
    </tr>
    </tfoot>
</table>

<script>
function calculateAge(birthDate) {
  const today = new Date();
  const birthDateObj = new Date(birthDate);
  const age = Math.floor((today - birthDateObj) / 1000 / 60 / 60 / 24 / 365);
  return age;
}

function updateAverageAge() {
  const table = document.getElementById('studentTable');
  const tbody = table.querySelector('tbody');
  const rows = tbody.getElementsByTagName('tr');
  let totalAge = 0;

  for (let i = 0; i < rows.length; i++) {
    const birthdate = rows[i].cells[1].textContent;
    totalAge += calculateAge(birthdate);
  }

  const averageAge = Math.ceil(totalAge / rows.length);
  document.getElementById('averageAgeCell').textContent = averageAge;
}

function addStudent() {
  const name = document.getElementById('name').value;
  const birthdate = document.getElementById('birthdate').value;
  const gender = document.getElementById('gender').value;

  if (name === '' || birthdate === '' || gender === '') {
    alert('Пожалуйста, заполните все поля.');
    return;
  }

  const age = calculateAge(birthdate);

  const table = document.getElementById('studentTable').getElementsByTagName('tbody')[0];
  const newRow = table.insertRow(table.rows.length);

  const nameCell = newRow.insertCell(0);
  const birthdateCell = newRow.insertCell(1);
  const genderCell = newRow.insertCell(2);
  const ageCell = newRow.insertCell(3);

  nameCell.innerHTML = name;
  birthdateCell.innerHTML = birthdate;
  genderCell.innerHTML = gender;
  ageCell.innerHTML = age;

  updateAverageAge();

  // Очистить поля формы
  document.getElementById('name').value = '';
  document.getElementById('birthdate').value = '';
  document.getElementById('gender').value = '';
}
</script>
</body>
</html>