add notification bar

index.html

@@ -56,5 +56,8 @@ <h2 class="stored-heading">Saved Answer</h2>
                 </div>
             </div>
         </div>
+        <div class="notification-bar" id="notification-bar" onclick="close_notification()">
+            <div class="notification-message" id="notification-message" onclick=""></div>
+        </div>
     </body>
 </html>

main.css

@@ -1,3 +1,4 @@
+/* Adding background image to body */
 body {
     background-image: url("./pattern.png");
     background-repeat: repeat;
@@ -82,3 +83,40 @@ body {
     background-color: #999;
     color: white;
 }
+
+/* It is defined to style the notification bar */
+.notification-bar {
+    /* positioning the bar at the bottom of the page */
+    position: absolute;
+    bottom: 50px;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+
+    /* styling */
+    border-radius: 15px;
+    border: 2px solid rgb(88, 37, 37);
+    width: 520px;
+    height: 50px;
+    background-color: rgb(190, 135, 127);
+    cursor: pointer;
+
+    /* by default notification bar is not visible */
+    /* we change this attribute every time that we want to show something on the bar */
+    display: none;
+
+}
+
+/* This styling is defined to make it clear to user that he is able to close it */
+.notification-bar:hover {
+    background-color: rgb(219, 189, 184);
+    border: 2px solid rgb(133, 62, 62);
+}
+
+/* This is defined to style the message inside the notification bar */
+.notification-message {
+    display: inline-block;
+    padding-top: 12px;
+    padding-left: 20px;
+    color: rgb(80, 24, 24);
+}

main.js

@@ -17,15 +17,15 @@ class Result {
 // It is defined to be used as "shared state" between function. (like Redux or Vuex)
 let result = null;
 
-// Validate name 
+// Validate name
 // length between 1 and 255
 // only lowercase and uppercase english letters and spaces
 function validate_form(name) {
     let reg_expr = /^[a-zA-Z ]{1,255}$/;
     return reg_expr.test(name);
 }
 
-// It is defined to clear all information that is displaying on screen, 
+// It is defined to clear all information that is displaying on screen,
 // after submitting a new name to lookup
 function clear_results() {
     result = null; // clear shared state
@@ -48,7 +48,7 @@ function clear_results() {
 function load_data(name) {
     let stored_data = window.localStorage.getItem(name);
     if (stored_data != null) {
-        stored_data = JSON.parse(stored_data)
+        stored_data = JSON.parse(stored_data);
         // technically there is no need for below line
         // it is written, only because the same logic has became mandatory in
         // requirements (in fetching stage - using Object instead of json)
@@ -111,11 +111,11 @@ function fetch_data(name) {
                 result_gender.innerHTML = result.gender;
                 result_probability.innerHTML = result.probability;
             } else {
-                console.log("sorry we cant find out what gender is this?");
+                notify("Sorry, we cant find out gender of the name.");
             }
         })
         .catch((reason) => {
-            console.log(reason);
+            notify("Sorry, we have some problems with API call. ");
         });
 }
 
@@ -129,11 +129,29 @@ async function submit_form(event) {
             fetch_data(name);
             load_data(name);
         } else {
-            console.log("please provide valid name");
+            notify("Only english letters and spaces up to 255 characters is allowed.");
         }
     } catch (e) {
-        console.log(e);
+        notify("Sorry, we have some problems with submitting the form. ");
     } finally {
         event.preventDefault();
     }
 }
+
+// It is defined to show the notification bar with the message provided
+function notify(message) {
+    let notification_bar = document.getElementById("notification-bar");
+    let notification_message = document.getElementById("notification-message");
+
+    notification_bar.style.display = "block";
+    notification_message.innerHTML = message;
+}
+
+// It is defined to close the notification bar (by clicking inside it)
+function close_notification() {
+    let notification_bar = document.getElementById("notification-bar");
+    let notification_message = document.getElementById("notification-message");
+
+    notification_bar.style.display = "none";
+    notification_message.innerHTML = "";
+}