finally

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;
+}

index.html

@@ -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>

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 += `
+                <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);
+});