css edited

Author: Shreekant-04

ToastNotification/script.js

@@ -37,8 +37,7 @@ btn.addEventListener("click", () => {
 //unfilled  form pop
 function fillForm() {
   let div = document.createElement("div");
-  div.classList.add("msgSent");
-  div.style.color = "red";
+  div.classList.add("msg-not-sent");
   toastNotification.appendChild(div);
   div.innerHTML = `<span class="material-symbols-outlined"> check_circle </span> Please fill the form`;
   removeToast(div);
@@ -53,6 +52,7 @@ bookForm.addEventListener("submit", function (event) {
   emailjs.sendForm(serviceID, templateID, this).then(
     () => {
       toast();
+      this.reset();
     },
     (err) => {
       alert(JSON.stringify(err));

ToastNotification/style.css

@@ -81,30 +81,43 @@ form button:active {
   flex-direction: column;
   gap: 20px;
 }
-.msgSent {
+.msgSent,
+.msg-not-sent {
   display: flex;
   height: 8vmin;
   justify-content: center;
   align-items: center;
   gap: 5px;
-  color: green;
   font-weight: 900;
   border-radius: 20px;
   background-color: #e6e8e6;
   box-shadow: 0 0 5px;
   position: relative;
   overflow: hidden;
 }
-.msgSent:after {
+.msgSent {
+  color: green;
+}
+.msg-not-sent {
+  color: red;
+}
+
+.msgSent:after,
+.msg-not-sent:after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
-  background-color: black;
   width: 100%;
   height: 5px;
   animation: width 5s linear forwards;
 }
+.msg-not-sent:after {
+  background-color: red;
+}
+.msgSent:after {
+  background-color: green;
+}
 @keyframes width {
   to {
     width: 0;