Day # 15: Inspiring Notifications

Handling events in Javascript is crucial for any frontend developer. At the end of the day, we want to be able to handle visitors’ interactions whenever he/she clicks on a certain part of our websites.

With that in mind, I created this small website in which there is a button. Once you click on that button, you will get some sort of notification that will show up at the top right corner of the website with an inspiring remark to nourish your motivation.

In order to do that, we need to position that notification first, by setting the position property to the value of fixed, then placing at the top and right with let’s say a value of 10px each. Finally, by setting the display property to flex and the align-items to flex-end, we make sure that any time that we click on that button, a notification will show below the previous one. 

#toasts {

    position: fixed;

    top: 10px;

    right: 10px;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

}

We are creating those notifications dynamically. In other words, we are using a function in Javascript that consists of creating a div element every time we click that button and we insert the content of that div through an array that is filled with inspiring remarks:

function createNotification() {

    const notif = document.createElement('div')

    notif.classList.add('toast')

    notif.innerText = getRandomMessage()

    toasts.appendChild(notif)

}