added function showAlert

css/style.css

@@ -11,6 +11,13 @@ form button {
     margin-top: 20px;
     margin-bottom: 0;
 }
+.alert {
+    padding: 20px;
+}
+.alert-wrap {
+    position: fixed;
+    right: 30px;
+}
 .modal {
     max-height: 460px;
 }

index.html

@@ -11,6 +11,7 @@
 </head>
 
 <body>
+    <div class="alert-wrap"></div>
     <div class="modal-mask">
         <div class="modal">
             <div class="modal-head">
@@ -26,9 +27,7 @@
                             <th class="align-right">Job</th>
                         </tr>
                     </thead>
-                    <tbody>
+                    <tbody></tbody>
-    
-                    </tbody>
                 </table>
             </div>
             <div class="modal-footer">

js/index.js

@@ -20,6 +20,14 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 
+    const showAlert = function() {
+        const $alert = document.querySelector('.alert-wrap');
+        $alert.innerHTML += '<p class="alert alert-success">Person has been successfully added!</p>';
+        setTimeout(() => {
+            $alert.querySelector('p').remove();
+        }, 2000);
+    }
+
     $form.addEventListener('submit', (e) => {
         e.preventDefault();
         const _this = e.target,
@@ -29,6 +37,7 @@ document.addEventListener('DOMContentLoaded', () => {
             job = _this.job.value;
 
         new Person(firstName, surName, age, job).addPerson();
+        showAlert();
     });
 
     const showPersons = function () {