Making toasts with the Popover API

So the new Popover API is now available in most1 browsers. It lets you easily create non-modal popovers. But what if we pushed it further than that? What if we could create toasts with zero libraries, using just the Popover API? That’s what this guide is about. Let’s start with creating a function called makeToast() and initializing variables for the toast parts: 1 2 3 4 5 6 7 8 9 10 const t_anim_duration = 200; function makeToast(title="Toast", msg="Hello World", color="white", bg="DarkSlateBlue") { // initializing toast parts const t = document.createElement('div'); const t_head = document.createElement('div'); const t_head_title = document.createElement('b'); const t_head_close = document.createElement('button'); const t_msg = document.createTextNode(msg); const t_timeout = 3000; Variable explanation: t - the toast itself; t_head - toast head (title + close button); t_head_title - toast title; t_head_close - the close button; t_msg - toast message. t_timeout - how much to wait…