Merge pull request #6 from manmodesanket/feat/toast-notification

Toast Notification
Jaynil1611 · Feb 13, 2022 · 2538c8d · 2538c8d
2 parents ed4480f + e34e78a
commit 2538c8d
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+**/.DS_Store
+**/package.json
+**/.codesandbox
diff --git a/vanillaJs/toast-notification/README.md b/vanillaJs/toast-notification/README.md
@@ -0,0 +1,11 @@
+## Toast Notification
+
+Q. Upon clicking Info button and Warning button toast notification should popup at the bottom of the screen and if Error button is clicked error notification should popup at the top of screen.
+
+This problem tests css skills as well as knowledge of JavaScript DOM APIs. It is not expected to know all DOM APIs, feel free to ask for help.
+
+This can be enhanced more. Further, you can add a close button on the toast notification which closes the toast.
+
+## Solution
+
+Toast Notification Solution [link](https://codesandbox.io/s/toast-notification-h6cut)
diff --git a/vanillaJs/toast-notification/index.html b/vanillaJs/toast-notification/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Parcel Sandbox</title>
+    <meta charset="UTF-8" />
+  </head>
+
+  <body>
+    <div id="app">
+      <div class="buttons">
+        <button id="button1" type="info" content="Info Toast">Info</button>
+        <button id="button2" type="warning" content="Warning Toast">
+          Warning
+        </button>
+        <button id="button3" type="error" content="Error Toast" top="true">
+          Error
+        </button>
+      </div>
+      <div class="toast__notifications"></div>
+      <div class="toast__notifications__error"></div>
+    </div>
+
+    <script src="src/index.js"></script>
+  </body>
+</html>
diff --git a/vanillaJs/toast-notification/src/index.js b/vanillaJs/toast-notification/src/index.js
@@ -0,0 +1,31 @@
+import "./styles.css";
+
+function addToast(data) {
+  const toastDiv = document.createElement("div");
+  toastDiv.classList.add(`toast__${data.type}`);
+  toastDiv.classList.add("toast");
+  toastDiv.innerHTML = data.content;
+  if (data.position === "true") {
+    const toastDivError = document.querySelector(".toast__notifications__error");
+    toastDivError.appendChild(toastDiv);
+    toastDiv.classList.add(`toast__top`);
+    setTimeout(() => {
+      toastDivError.removeChild(toastDiv);
+    }, 2000);
+  } else {
+    const mainToastDiv = document.querySelector(".toast__notifications");
+    mainToastDiv.appendChild(toastDiv);
+    setTimeout(() => {
+      mainToastDiv.removeChild(toastDiv);
+    }, 2000);
+  }
+}
+
+function fun(e) {
+  const type = e.target.getAttribute("type");
+  const content = e.target.getAttribute("content");
+  const position = e.target.getAttribute("top");
+  addToast({ type, content, position });
+}
+
+document.querySelector(".buttons").addEventListener("click", fun);
diff --git a/vanillaJs/toast-notification/src/styles.css b/vanillaJs/toast-notification/src/styles.css
@@ -0,0 +1,40 @@
+body {
+    font-family: sans-serif;
+  }
+
+  .toast__notifications {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    bottom: 10px;
+    right: 5px;
+  }
+
+  /* Separate normal notification from error notification */
+  .toast__notifications__error {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    right: 5px;
+    top: 10px;
+  }
+
+  /* common style for a toast notification*/
+  .toast {
+    padding: 0.5rem;
+    margin-bottom: 5px;
+    border-radius: 10px;
+  }
+
+  .toast__info {
+    background-color: cyan;
+  }
+
+  .toast__warning {
+    background-color: yellow;
+  }
+
+  .toast__error {
+    background-color: red;
+  }
+