diff --git a/100_projects/49-test-notification-click/index.html b/100_projects/49-test-notification-click/index.html
new file mode 100644
index 0000000..781f1c3
--- /dev/null
+++ b/100_projects/49-test-notification-click/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+ Test Notifaction
+
+
+
+
+
+
+
+
diff --git a/100_projects/49-test-notification-click/script.js b/100_projects/49-test-notification-click/script.js
new file mode 100644
index 0000000..a13d432
--- /dev/null
+++ b/100_projects/49-test-notification-click/script.js
@@ -0,0 +1,18 @@
+const btn = document.getElementById("btn");
+const container = document.getElementById("container");
+
+btn.addEventListener("click", () => {
+ createNotification();
+});
+function createNotification() {
+ const notification = document.createElement("div");
+ notification.classList.add("test");
+
+ notification.innerText = "Warning..";
+
+ container.appendChild(notification);
+
+ setTimeout(() => {
+ notification.remove();
+ }, 3000);
+}
\ No newline at end of file
diff --git a/100_projects/49-test-notification-click/style.css b/100_projects/49-test-notification-click/style.css
new file mode 100644
index 0000000..e2f3bec
--- /dev/null
+++ b/100_projects/49-test-notification-click/style.css
@@ -0,0 +1,38 @@
+* {
+ box-sizing: border-box;
+}
+body {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0;
+ min-height: 100vh;
+ background-color: #161622;
+}
+button {
+ background-color:#808080;
+ color: white;
+ font-size: 19px;
+ padding: 1rem;
+ border-radius: 5px;
+ border: none;
+ cursor: pointer;
+ transition: .5s;
+}
+button:hover{
+ background: white;
+ color: #161622;
+}
+#container {
+ position: fixed;
+ bottom: 10px;
+ right: 10px;
+}
+.test {
+ background-color: #F20A15;
+ border-radius: 5px;
+ color: white;
+ padding: 15px;
+ margin: 10px;
+ width: 100px;
+}
\ No newline at end of file