commit b8fa45aee89a5bbfc54b9ac67b9a6be62f8abef9 Author: Sergey Yarkov Date: Sat Oct 19 23:50:00 2019 +0300 finally diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..55da6c3 --- /dev/null +++ b/css/style.css @@ -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; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..5babc14 --- /dev/null +++ b/index.html @@ -0,0 +1,62 @@ + + + + + + + + Js ES6 Classes + + + + + +
+
+
+

List of persons

+
+
+ + + + + + + + + + + + +
FirstNameSurnameAgeJob
+
+
+ +
+
+
+ +
+
+
+ +
+
+

Add new person

+ + + + + + + + + +
+
+
+ + + + \ No newline at end of file diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..8611c6c --- /dev/null +++ b/js/index.js @@ -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 += ` + + +

${item.firstName}

+ + +

${item.surName}

+ + +

${item.age}

+ + +

${item.job}

+ + + `; + } + } else { + list.innerHTML = '
No one person.
'; + } + } + + const hidePersons = function () { + $modal.style.display = 'none'; + document.body.style.overflow = ''; + } + + $btnShow.addEventListener('click', showPersons); + $btnClose.addEventListener('click', hidePersons); +}); \ No newline at end of file