You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
35 lines
842 B
35 lines
842 B
4 years ago
|
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)]
|
||
|
|
}
|