completed

Malavi1 · Dec 12, 2023 · df761f2 · df761f2
1 parent 2f8b157
commit df761f2
Show file tree

Hide file tree

Showing 3 changed files with 141 additions and 0 deletions.
diff --git a/Day-12/index.html b/Day-12/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Toast Notification</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="buttons">
+        <button onclick=showToast(successMsg)>Success</button>
+        <button onclick="showToast(errorMsg)">Error</button>
+        <button onclick="showToast(invalidMsg)">Invalid</button>
+
+    </div>
+    <div id="toast-box"></div>
+    <script src="index.js"></script>
+    <script src="https://kit.fontawesome.com/bbe6f2c2c3.js" crossorigin="anonymous"></script>
+</body>
+
+</html>
diff --git a/Day-12/index.js b/Day-12/index.js
@@ -0,0 +1,27 @@
+let toastBox = document.getElementById("toast-box");
+let successMsg =
+  '<i class="fa-solid fa-2x fa-circle-check" style="color: #007d00;"></i>Successfully submited';
+let errorMsg =
+  '<i class="fa-solid fa-2x fa-circle-xmark" style="color: #ff0000;"></i>Please fix the Error';
+let invalidMsg =
+  '<i class="fa-solid fa-2x fa-circle-exclamation" style="color:  rgb(20, 58, 248);"></i>Invalid input check again';
+
+function showToast(msg) {
+  let toast = document.createElement("div");
+  toast.classList.add("toast");
+  toast.innerHTML = msg;
+  toastBox.appendChild(toast);
+
+  if (msg.includes("Successfully")) {
+    toast.classList.add("success");
+  }
+  if (msg.includes("Error")) {
+    toast.classList.add("error");
+  }
+  if (msg.includes("Invalid")) {
+    toast.classList.add("invalid");
+  }
+  setTimeout(() => {
+    toast.remove();
+  }, 6000);
+}
diff --git a/Day-12/style.css b/Day-12/style.css
@@ -0,0 +1,91 @@
+* {
+    margin: 0;
+    padding: 0;
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+}
+
+/* body {
+    background-color: rgb(192, 172, 211);
+} */
+
+.buttons {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+button {
+    background-color: antiquewhite;
+    border: 0;
+    outline: 0;
+    background-color: black;
+    color: white;
+    padding: 12px 24px;
+    margin: 10px;
+    cursor: pointer;
+}
+
+#toast-box {
+    position: absolute;
+    top: 30px;
+    left: 36%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.toast {
+    width: 400px;
+    position: relative;
+    height: 70px;
+    background-color: white;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+    margin: 15px 0;
+    display: flex;
+    align-items: center;
+    transform: translateY(100%);
+    animation: movetop 0.5s linear forwards;
+
+}
+
+@keyframes movetop {
+    100% {
+        transform: translateY(0);
+    }
+}
+
+i {
+    margin: 0 20px;
+}
+
+.toast::after {
+    position: absolute;
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    height: 5px;
+    background-color: green;
+    content: "";
+    animation: anim 10s linear forwards;
+}
+
+@keyframes anim {
+    100% {
+        width: 0;
+    }
+}
+
+.toast.success::after {
+    background-color: rgb(9, 161, 14);
+}
+
+.toast.error::after {
+    background-color: red;
+}
+
+.toast.invalid::after {
+    background-color: rgb(20, 58, 248);
+}