From 96a59263d4a83133f961ea9eb73379046b33b574 Mon Sep 17 00:00:00 2001 From: Brad Traversy Date: Tue, 3 Nov 2020 15:34:14 -0500 Subject: [PATCH] Toast notification --- toast-notification/index.html | 16 +++++++++ toast-notification/script.js | 35 +++++++++++++++++++ toast-notification/style.css | 64 +++++++++++++++++++++++++++++++++++ 3 files changed, 115 insertions(+) create mode 100644 toast-notification/index.html create mode 100644 toast-notification/script.js create mode 100644 toast-notification/style.css 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; +}