From 18b085133235800e97ecf5a3e993e26549821758 Mon Sep 17 00:00:00 2001 From: couldntfindabetterusername Date: Mon, 14 Mar 2022 23:20:49 +0530 Subject: [PATCH] day 27 completed --- my code/27-toast-notification/index.html | 24 +++++++++++++ my code/27-toast-notification/script.js | 46 ++++++++++++++++++++++++ my code/27-toast-notification/style.css | 37 +++++++++++++++++++ 3 files changed, 107 insertions(+) create mode 100644 my code/27-toast-notification/index.html create mode 100644 my code/27-toast-notification/script.js create mode 100644 my code/27-toast-notification/style.css diff --git a/my code/27-toast-notification/index.html b/my code/27-toast-notification/index.html new file mode 100644 index 0000000..ee05ede --- /dev/null +++ b/my code/27-toast-notification/index.html @@ -0,0 +1,24 @@ + + + + + + + + 27 toast notification + + + + + + + Show Notification + +
+ +
+ + + + + \ No newline at end of file diff --git a/my code/27-toast-notification/script.js b/my code/27-toast-notification/script.js new file mode 100644 index 0000000..bfa761a --- /dev/null +++ b/my 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); +}); diff --git a/my code/27-toast-notification/style.css b/my code/27-toast-notification/style.css new file mode 100644 index 0000000..a168493 --- /dev/null +++ b/my 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; +}