How to Create Toast Notifications (or Popups) - HTML, CSS & JavaScript Tutorial

God Bless You.

Great Tutorial on creating Toast Notifications. Thanks, Dom

{2021-09-02}

Hi Dom,

Thanks a lot!
Simple, preciss & powerful.


gab,
from Rio Cuarto, Argentina

does anyone know why there is an error for classList of undefined being thrown?

Cannot read property 'classList' of undefined

I'm getting an error when loading in the page:
Uncaught SyntaxError: Unexpected identifier

The error lists rulenumber 9 of toast.js (the line where show(message, state) { is located)

How do I fix this? whenever I deleted the init() it did work for some reason I believe, but yeah, it's init()

Thanks for the tutorial. What improvement should we do in order to be able to create more than one notification with one button so that the notifications are arranged one after the other whenever a button is clicked?

You're blessed for this ... I learnt a lot from this very simple tutorial

could you show the source code that you show initially? i understood your tutorial but i dont know how to connect it to a button now and have the toast work with the correct message, thank you!

U realy helped me, i was wondering how the 'sweetalert' js works while we dont add any html elements to page

Thanks for this tutorial!

Nice video, could you please show how to add buttons, like 'OK' and 'CLOSE' on the toast bar?

Nice sir👍👍👍👍

fantastic, great video,

the code pen isnt working ( we see item as list)

Good tutorial, but keyboard clicks which don't correlate with the visible typed words annoyed me.

But good tutorial.