bubble/add-persons
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/add-persons.git synced 2026-10-11 10:19:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

finally

Browse Source
This commit is contained in:
Sergey Yarkov 2019-10-19 23:50:00 +03:00
commit b8fa45aee8
3 changed files with 160 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
css/style.css Normal file
View File

@ -0,0 +1,27 @@
/* Form */
form {
border: 1px solid #e2e2e2;
border-radius: 3px;
padding: 30px;
}
form input {
margin-bottom: 10px;
}
form button {
margin-top: 20px;
margin-bottom: 0;
}
.modal {
max-height: 460px;
}
.modal-mask {
display: none;
}
.modal-body {
background-color: #fff;
overflow-y: scroll;
}
.wrap-show {
display: flex;
justify-content: center;
}

62
index.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Js ES6 Classes</title>
<link rel="stylesheet" href="https://unpkg.com/mustard-ui@latest/dist/css/mustard-ui.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="modal-mask">
<div class="modal">
<div class="modal-head">
<p class="modal-title">List of persons</p>
</div>
<div class="modal-body">
<table>
<thead>
<tr>
<th>FirstName</th>
<th>Surname</th>
<th>Age</th>
<th class="align-right">Job</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="modal-footer">
<button class="button-danger btn-close">Close</button>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<div class="wrap-show">
<button class="button-warning button-round btn-show">Show Persons</button>
</div>
<form>
<h2>Add new person</h2>
<label for="name">Firstname</label>
<input required id="name" type="text">
<label for="surname">Surname</label>
<input required id="surname" type="text">
<label for="age">Age</label>
<input required id="age" type="text">
<label for="job">Job</label>
<input required id="job" type="text">
<button class="button-primary button-round" type="submit">Add person</button>
</form>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>

71
js/index.js Normal file
View File

@ -0,0 +1,71 @@
// Person => instances
document.addEventListener('DOMContentLoaded', () => {
const $form = document.querySelector('form');
const $modal = document.querySelector('.modal-mask');
const $btnShow = document.querySelector('.btn-show');
const $btnClose = document.querySelector('.btn-close');
const persons = [];
class Person {
constructor(firstName, surName, age, job) {
this.firstName = firstName;
this.surName = surName;
this.age = age;
this.job = job;
}
addPerson() {
persons.push(this);
}
}
$form.addEventListener('submit', (e) => {
e.preventDefault();
const _this = e.target,
firstName = _this.name.value,
surName = _this.surname.value,
age = _this.age.value,
job = _this.job.value;
new Person(firstName, surName, age, job).addPerson();
});
const showPersons = function () {
$modal.style.display = 'flex';
document.body.style.overflow = 'hidden';
const list = $modal.querySelector('tbody');
if (persons.length) {
list.innerHTML = '';
for (let item of persons) {
list.innerHTML += `
<tr>
<td>
<p>${item.firstName}</p>
</td>
<td>
<p>${item.surName}</p>
</td>
<td>
<p>${item.age}</p>
</td>
<td>
<p>${item.job}</p>
</td>
</tr>
`;
}
} else {
list.innerHTML = '<h6 style="text-align: center;">No one person.</h6>';
}
}
const hidePersons = function () {
$modal.style.display = 'none';
document.body.style.overflow = '';
}
$btnShow.addEventListener('click', showPersons);
$btnClose.addEventListener('click', hidePersons);
});