const $ = sel => document.querySelector(sel)
const $$ = sel => Array.from(document.querySelectorAll(sel))
const create_elm = str => {
    const div = document.createElement('div')
    div.innerHTML = str
    return Array.from(div.childNodes)
}

const flash_msg = (message) => {
    const elm = create_elm('<div class="flash-msg flex"><span class="flex-grow">' + message + '</span> <span class="close-btn">×</span></div>')[0]
    $('main .container').prepend(elm)
    elm.querySelector('.close-btn').addEventListener('click', e => elm.remove())
}

onload(() => {
    // remove flash messages when close button is clicked
    $$('.flash-msg .close-btn').forEach(elm => elm.addEventListener('click', e => {
        elm.parentElement.remove()
    }))
})