updated web

web/js/message.js

@@ -1,18 +1,34 @@
-const message = document.querySelector('.message')
-const messagetext = document.querySelector('.messagetext')
+const notificationsection = document.querySelector(".notificationsection");
 
 const notification = (text, type) => {
-    if (type === "error") {
-        message.classList.remove('success')
-        message.classList.add('error')
-    } else {
-        message.classList.remove('error')
-        message.classList.add('success')
-    }
-    messagetext.innerHTML = text
-    message.classList.add('active')
+  const notificationbox = document.createElement("div");
+  const notificationtextbox = document.createElement("div");
+  const notificationtext = document.createElement("h3");
+  notificationtext.classList.add("notificationtext");
+  notificationtextbox.append(notificationtext);
+  notificationtextbox.classList.add("notificationtextbox");
+  notificationtextbox.classList.add("card-header");
+  notificationbox.append(notificationtextbox);
+  notificationbox.classList.add("notification");
+  notificationbox.addEventListener("click", () => {
+    notificationbox.classList.remove("active");
+  });
+  notificationsection.append(notificationbox);
+  if (type === "error") {
+    notificationbox.classList.remove("success");
+    notificationbox.classList.add("error");
+  } else {
+    notificationbox.classList.remove("error");
+    notificationbox.classList.add("success");
+  }
+  notificationtext.innerHTML = text;
+  setTimeout(() => {
+    notificationbox.classList.add("active");
+  }, 300);
+  setTimeout(() => {
+    notificationbox.classList.remove("active");
     setTimeout(() => {
-        message.classList.remove('active')
-    }, 2000)
-}
-
+      notificationsection.removeChild(notificationbox);
+    }, 200);
+  }, 3000);
+};