Skip to content

Внес изменения #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Andlek wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Внес изменения #15

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
222 changes: 139 additions & 83 deletions L22-webOrigins2/classwork.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>