From df761f23b045c27d43ae65326f13ebfaa8145baf Mon Sep 17 00:00:00 2001 From: Malavi1 Date: Tue, 12 Dec 2023 09:51:32 +0530 Subject: [PATCH] completed --- Day-12/index.html | 23 ++++++++++++ Day-12/index.js | 27 ++++++++++++++ Day-12/style.css | 91 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 141 insertions(+) create mode 100644 Day-12/index.html create mode 100644 Day-12/index.js create mode 100644 Day-12/style.css diff --git a/Day-12/index.html b/Day-12/index.html new file mode 100644 index 0000000..c9c1800 --- /dev/null +++ b/Day-12/index.html @@ -0,0 +1,23 @@ + + + + + + + Toast Notification + + + + +
+ + + + +
+
+ + + + + \ No newline at end of file diff --git a/Day-12/index.js b/Day-12/index.js new file mode 100644 index 0000000..d10e41b --- /dev/null +++ b/Day-12/index.js @@ -0,0 +1,27 @@ +let toastBox = document.getElementById("toast-box"); +let successMsg = + 'Successfully submited'; +let errorMsg = + 'Please fix the Error'; +let invalidMsg = + '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 new file mode 100644 index 0000000..f4e69a8 --- /dev/null +++ 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); +} \ No newline at end of file