diff --git a/toast-notification/index.html b/toast-notification/index.html
new file mode 100644
index 0000000..4fba9c2
--- /dev/null
+++ b/toast-notification/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+ Toast Notification
+
+
+
+
+
+
+
+
+
diff --git a/toast-notification/script.js b/toast-notification/script.js
new file mode 100644
index 0000000..ece1e00
--- /dev/null
+++ b/toast-notification/script.js
@@ -0,0 +1,35 @@
+const button = document.getElementById('button')
+const toasts = document.getElementById('toasts')
+
+const messages = [
+ 'Message One',
+ 'Message Two',
+ 'Message Three',
+ 'Message Four',
+]
+
+const types = ['info', 'success', 'error']
+
+button.addEventListener('click', () => createNotification())
+
+function createNotification(message = null, type = null) {
+ const notif = document.createElement('div')
+ notif.classList.add('toast')
+ notif.classList.add(type ? type : getRandomType())
+
+ notif.innerText = message ? message : getRandomMessage()
+
+ toasts.appendChild(notif)
+
+ setTimeout(() => {
+ notif.remove()
+ }, 3000)
+}
+
+function getRandomMessage() {
+ return messages[Math.floor(Math.random() * messages.length)]
+}
+
+function getRandomType() {
+ return types[Math.floor(Math.random() * types.length)]
+}
\ No newline at end of file
diff --git a/toast-notification/style.css b/toast-notification/style.css
new file mode 100644
index 0000000..9ae67d4
--- /dev/null
+++ b/toast-notification/style.css
@@ -0,0 +1,64 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: rebeccapurple;
+ font-family: 'Poppins', sans-serif;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ overflow: hidden;
+ margin: 0;
+}
+
+.btn {
+ background-color: #ffffff;
+ color: rebeccapurple;
+ font-family: inherit;
+ font-weight: bold;
+ padding: 1rem;
+ border-radius: 5px;
+ border: none;
+ cursor: pointer;
+}
+
+.btn:focus {
+ outline: none;
+}
+
+.btn:active {
+ transform: scale(0.98);
+}
+
+#toasts {
+ position: fixed;
+ bottom: 10px;
+ right: 10px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+}
+
+.toast {
+ background-color: #fff;
+ border-radius: 5px;
+ padding: 1rem 2rem;
+ margin: 0.5rem;
+}
+
+.toast.info {
+ color: rebeccapurple;
+}
+
+.toast.success {
+ color: green;
+}
+
+.toast.error {
+ color: red;
+}