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;
+}