From d6d6b144bf846ef6658fe5daf83645339341cfe1 Mon Sep 17 00:00:00 2001
From: Andlek <palabugin@inbox.ru>
Date: Sat, 12 Aug 2023 23:35:53 +0400
Subject: [PATCH] =?UTF-8?q?=D0=92=D0=BD=D0=B5=D1=81=20=D0=B8=D0=B7=D0=BC?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B5=D0=BD=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 L22-webOrigins2/classwork.html | 222 +++++++++++++++++++++------------
 1 file changed, 139 insertions(+), 83 deletions(-)
diff --git a/L22-webOrigins2/classwork.html b/L22-webOrigins2/classwork.html
index 3230ed1..f914184 100644
--- a/L22-webOrigins2/classwork.html
+++ b/L22-webOrigins2/classwork.html
@@ -1,96 +1,152 @@
-<!DOCTYPE>
-<html>
+<!DOCTYPE html>
+<html lang="en">
 <head>
-    <title>Классная работа</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Список студентов</title>
     <style>
-        h1, h2, h3 {
+        h1 {
             color: steelblue;
         }
-        
-        .content-block {
-            width: 800px;
-            margin-left: 20px;
-        }
-     
-        .input-form > input{
-            width: 300px;
-        }
-        
-        pre {
-            border: 1px solid steelblue;
-            width: 300px;
-            min-height: 50px;
-        }
-    </style>
-    
-    <!--Сюда вствляем скрипт для второго упражнения-->
-</head>
-
-<body>
-
-<h2>
-Классная работа
-</h2>
-
-
-<h3>
-    Ситуация:
-</h3>
-
-<div class = "content-block">  
-    <p>
-        Закинул старик невод в море...
-    </p>
-</div>
-
 
-<h3>
-    Форма для ввода:
-</h3>
+        form {
 
-<div class = "input-form"> 
-    <input type = "text" value = "И сидит теперь на берегу без невода!">
-</div>
-
-
-<!--Сюда вствляем скрипт для первого упражнения-->
-
-<br/><br/><br/>
-<hr/>
-
-<h3>
-    Животное:
-</h3>
-
-<pre id = "animalContainer"></pre>
-
-<h3>
-    Котик:
-</h3>
+        border: 1px solid steelblue;
+        width: 650px;
+        border-collapse: collapse;
+        margin-bottom: 30px;
+        }
 
-<pre id = "kittyContainer"></pre>
+        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>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+</html>
\ No newline at end of file
