day 27 completed

4 years ago · 18b0851332
parent 6265acc064
commit 18b0851332
3 changed files with 107 additions and 0 deletions
--- a/code/27-toast-notification/index.html
+++ b/code/27-toast-notification/index.html
@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>27 toast notification</title>
+
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+    <span class="msg" id="button">Show Notification</span>
+
+    <div id="wrapper">
+
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
--- a/code/27-toast-notification/script.js
+++ b/code/27-toast-notification/script.js
@ -0,0 +1,46 @@
+const button = document.getElementById("button");
+const wrapper = document.getElementById("wrapper");
+
+let variable = 0;
+
+button.addEventListener("click", () => {
+  const number = Math.ceil(Math.random() * 4);
+
+  const span = document.createElement("span");
+  span.classList.add("msg");
+
+  let text = "";
+  let color = "";
+
+  switch (number) {
+    case 1:
+      text = "Message One";
+      color = "blue";
+      break;
+
+    case 2:
+      text = "Message two";
+      color = "green";
+      break;
+
+    case 3:
+      text = "Message Three";
+      color = "red";
+      break;
+
+    default:
+      text = "Message Four";
+      color = "yellow";
+      break;
+  }
+
+  span.append(document.createTextNode(text));
+  span.style.color = color;
+  span.style.fontWeight = "500";
+
+  wrapper.append(span);
+
+  setTimeout(() => {
+    span.remove();
+  }, 2000);
+});
--- a/code/27-toast-notification/style.css
+++ b/code/27-toast-notification/style.css
@ -0,0 +1,37 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  position: relative;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: violet;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+span.msg {
+  padding: 30px;
+  text-align: center;
+  background-color: #fff;
+  border-radius: 10px;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+#button {
+  color: violet;
+}
+
+#wrapper {
+  position: absolute;
+  right: 20px;
+  bottom: 20px;
+  display: grid;
+  grid-gap: 20px;
+}