From f93c5ef9df175aaa4dd05563feb658d2b94305e4 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Sun, 20 Oct 2019 00:01:40 +0300
Subject: [PATCH] added function showAlert

---
 css/style.css | 7 +++++++
 index.html    | 5 ++---
 js/index.js   | 9 +++++++++
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/css/style.css b/css/style.css
index 55da6c3..a7eb214 100644
--- a/css/style.css
+++ b/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;
 }
diff --git a/index.html b/index.html
index 5babc14..bec403f 100644
--- a/index.html
+++ b/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">
diff --git a/js/index.js b/js/index.js
index 8611c6c..84e7314 100644
--- a/js/index.js
+++ b/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 () {