added floating alert message

IEEEUCSC · Jan 8, 2024 · 83244c5 · 83244c5
1 parent 4970bf0
commit 83244c5
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 8 deletions.
diff --git a/revol_form/register.html b/revol_form/register.html
@@ -7,7 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>RevolUX 3.0</title>
   <link rel="stylesheet" href="bootstrap.css" />
-  <link rel="stylesheet" href="registerStyle.css" />
+  <link rel="stylesheet" href="registerStyle.css?ver=2.0" />
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
   <link rel="icon" href="../assets/img/img/favicon.png" />
 
@@ -82,6 +82,10 @@ <h6 style="color: #5ebd61;">One team should comprise of a minimum of 3 members a
               <div class="col-lg-12 mt-5 ">
 
                 <div class="php-email-form">
+
+                  <div class="alert alert-success d-none" role="alert" id="alert-div">
+                    A simple success alert—check it out!
+                  </div>
 
                   <div class="form-group mt-3">
                     <input type="text" class="form-control" id="team1" placeholder="Team Name" />
@@ -253,10 +257,7 @@ <h6 style="color: #5ebd61;">One team should comprise of a minimum of 3 members a
                     </div>
 
                   </div>
-                  <div class="alert alert-success d-none" role="alert" id="alert-div">
-                    A simple success alert—check it out!
-                  </div>
-
+
                   <div class="text-center">
                     <button type="submit" onclick="register();" style="width: 100%;color:whitesmoke" class="form-btn1">REGISTER</button>
                   </div>
@@ -291,7 +292,8 @@ <h6 style="color: #5ebd61;">One team should comprise of a minimum of 3 members a
 
   </div>
 
-  <script src="script.js"></script>
+  <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+  <script src="script.js?ver=2.0"></script>
 </body>
 
 </html>
diff --git a/revol_form/registerStyle.css b/revol_form/registerStyle.css
@@ -2325,4 +2325,59 @@ section {
     padding: 6px 18px;
   }
 }
-/* form */
+/* form */
+
+/* custom alert */
+
+.custom-alert {
+  position: fixed;
+  bottom: 5vh;
+  z-index: 1060;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+
+.custom-alert .alert-text {
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  background: #000000;
+  border-radius: 10px;
+  padding: 0.7rem 1.7rem;
+
+  color: #ffffff;
+  font-size: 1.1rem;
+}
+
+.custom-alert.danger-alert .alert-text {
+  background: #e35d6a;
+  background: #f53d3d;
+}
+
+.custom-alert.warning-alert .alert-text {
+  color: #856404;
+  background: #fff3cd;
+  border: 1px solid #ffeeba;
+}
+
+.custom-alert.info-alert .alert-text {
+  background: #3d8bfd;
+}
+
+.custom-alert.success-alert .alert-text {
+  background: #1db954;
+  color: #155724;
+  background-color: #d4edda;
+  border-color: #c3e6cb;
+}
+
+@media (orientation: portrait) {
+  .custom-alert {
+    width: 90%;
+  }
+
+  .custom-alert .alert-text {
+    font-size: 1rem;
+  }
+}
diff --git a/revol_form/script.js b/revol_form/script.js
@@ -4,6 +4,7 @@ function validateInput(value, errorMessage) {
     if (value.length === 0) {
         alertdiv.className = "alert alert-warning d-block";
         alertdiv.innerHTML = errorMessage;
+        alertUser("warning", errorMessage);
         return false;
     }
     return true;
@@ -19,6 +20,26 @@ function validateNIC(nic) {
     return false;
 }
 
+function alertUser(type, desc) {
+    var $div = $("<div>", {
+        class: "custom-alert " + type + "-alert"
+    });
+    $div.append("<div class='alert-text'>" + desc + "</div\>")
+
+    var count = $(".custom-alert").length;
+    $(".custom-alert").fadeOut(function () {
+        $(this).remove();
+    });
+
+    $div.hide().delay(count * 200).appendTo("body").fadeIn(function () {
+        setTimeout(function () {
+            $div.fadeOut(function () {
+                $div.remove();
+            });
+        }, 3000);
+    });
+}
+
 function register() {
     var alertdiv = document.getElementById("alert-div");
     var team = document.getElementById("team1");
@@ -52,6 +73,7 @@ function register() {
         if (mobile.value.length === 0 || mobile.value.length !== 10) {
             alertdiv.className = "alert alert-warning d-block";
             alertdiv.innerHTML = "Mobile number should be 10 digits";
+            alertUser("warning", "Mobile number should be 10 digits");
             return;
         }
 
@@ -64,6 +86,7 @@ function register() {
         && Math.min(name4.value.length, email4.value.length, mobile4.value.length, nic4.value.length) === 0) {
         alertdiv.className = "alert alert-warning d-block";
         alertdiv.innerHTML = "Complete the details of the fourth member";
+        alertUser("warning", "Complete the details of the fourth member");
         return;
     }
 
@@ -89,7 +112,7 @@ function register() {
     form.append("university", university.value);
 
     form.append("length_email4", email4.value.length);
-    form.append("members", memCount.value);
+    // form.append("members", memCount.value);
     form.append("register", "register");
 
     // fetch("registrationProcess", {
@@ -104,20 +127,25 @@ function register() {
             if (data.status === "200") {
                 alertdiv.className = "alert alert-success d-block";
                 alertdiv.innerHTML = data.desc;
+                alertUser("success", data.desc);
             } else if (data.status === "403") {
                 alertdiv.className = "alert alert-danger d-block";
                 alertdiv.innerHTML = data.desc;
+                alertUser("danger", data.desc);
             } else if (data.status === "400") {
                 alertdiv.className = "alert alert-danger d-block";
                 alertdiv.innerHTML = data.desc;
+                alertUser("danger", data.desc);
             } else {
                 alertdiv.className = "alert alert-danger d-block";
                 alertdiv.innerHTML = "Unexpected response from the server";
+                alertUser("danger", "Unexpected response from the server");
             }
         })
         .catch(error => {
             alertdiv.className = "alert alert-danger d-block";
             alertdiv.innerHTML = "Error occurred during the request. Please try again later.";
+            alertUser("danger", "Error occurred during the request. Please try again later.");
             console.error("Error:", error);
         });
 }