Update banner to contain multiple messages at once

views/shared/banner.ejs

@@ -1,31 +1,54 @@
 <div class="banner">
-    <p></p>
+    <ul></ul>
 </div>
 
 <script>
     let banner = {
-        createNotification: (val)=>{
-            let currentBanner = document.querySelector(".banner");
-            let bannerText = document.querySelector(".banner p");
-            currentBanner.style.display = "inline-block";
-            bannerText.innerText = val;
-            bannerText.classList = "notification";
+        errorList: [],
+        notificationList: [],
+
+        createNotification: function(value){
+            this.notificationList.push(value);
+
+            this.updateNotifications();
 
             setTimeout(()=>{
-                currentBanner.style.display = "none";
+                this.notificationList.splice(0, 1);
+                this.updateNotifications();
             }, 10000);
         },
 
-        createError: (val)=>{
-            let currentBanner = document.querySelector(".banner");
-            let bannerText = document.querySelector(".banner p");
-            currentBanner.style.display = "inline-block";
-            bannerText.innerText = val;
-            bannerText.classList = "error";
+        createError: function(value){
+            this.errorList.push(value);
+
+            this.updateNotifications();
 
             setTimeout(()=>{
-                currentBanner.style.display = "none";
+                this.errorList.splice(0, 1);
+                this.updateNotifications();
             }, 10000);
+        },
+
+        updateNotifications: function(){
+            let ul = document.querySelector(".banner ul");
+
+            while(ul.hasChildNodes()){
+                ul.removeChild(ul.firstChild);
+            }
+
+            for(let notification of this.notificationList){
+                let li = document.createElement("li");
+                li.classList = "notification";
+                li.innerText = notification;
+                ul.appendChild(li);
+            }
+
+            for(let error of this.errorList){
+                let li = document.createElement("li");
+                li.classList = "error";
+                li.innerText = error;
+                ul.appendChild(li);
+            }
         }
     }
 </script>

views/shared/shared.css

@@ -27,21 +27,19 @@
 .banner{
     width: 100%;
     text-align: center;
-    display: none;
+    min-height: 50px;
 }
 
     .banner .notification{
         background: green;
         color: white;
-        padding: 10px;
-        margin: 5px;
         font-weight: bold;
+        list-style-type: none;
     }
 
     .banner .error{
         background: red;
         color: white;
-        padding: 10px;
-        margin: 5px;
         font-weight: bold;
+        list-style-type: none;
     }