How to create a Notification Box

The theme for week #16 of the Weekly Coding Challenge is:

Notifications

The notification component is used in a web/mobile app when you want to notify the user that something happened based on his action - “successfully completed registration”, “error on an input field”, “confirmation of deletion of an item”, etc.

In this article we’re going to build these Notifications Boxes:

https://codepen.io/FlorinPop17/pen/QXgVNa/

The HTML

In our example, all the notifications appear in the top-right corner (feel free to change it if you want) and for that we need to have a container which will hold all these notifications and it’ll be positioned in that spot.

Also, we’ll have 4 types of notifications: info, success, warning, danger. We’ll set the notification color based on its type later in the CSS, and for that we’ll use different classes in the HTML:

<div class="notification-container" id="notification-container">
    <div class="notification notification-info">
        <strong>Info:</strong> Lorem ipsum dolor sit amet.
    </div>

    <div class="notification notification-success">
        <strong>Success:</strong> Lorem ipsum dolor sit amet consectetur
        adipisicing elit.
    </div>

    <div class="notification notification-warning">
        <strong>Warning:</strong> Lorem ipsum dolor sit amet, consectetur
        adipisicing.
    </div>

    <div class="notification notification-danger">
        <strong>Danger:</strong> Lorem ipsum dolor sit amet consectetur.
    </div>
</div>

We added an id on the .notification-container because we’ll target it later with JavaScript and we’ll create some dynamic notifications. 😉

The CSS

As mentioned above, the .notification-container will be position: fixed as we want to be able to place it in the top-right corner.

We’ll also have a little bit of animation on the .notification box when it’ll appear and disappear, and for this we’ll create two keyframes - grow and shrink - and we’ll manipulate the opacity and then the size of the element using transform: scale.

Last, but not least, we’ll have different background-colors for each type of notification.

.notification-container {
    position: fixed;
    top: 15px;
    right: 15px;
    width: 500px;
    max-width: calc(100% - 30px);
}

.notification {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    color: #fff;
    font-size: 16px;
    padding: 15px 20px;
    line-height: 20px;
    margin-bottom: 15px;
    animation: grow 0.5s ease-in forwards;
}

@keyframes grow {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.notification.hide {
    animation: shrink 0.3s ease-out forwards;
}

@keyframes shrink {
    to {
        opacity: 0;
        transform: scale(0.8);
    }
}

.notification strong {
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.notification-info {
    background-color: #00cae3;
}

.notification-success {
    background-color: #55b559;
}

.notification-warning {
    background-color: #ff9e0f;
}

.notification-danger {
    background-color: #f55145;
}

As you can see we used the .hide class on the notification to add the shrink animation. We’ll add this class dynamically in JavaScript before we want to remove the notification from the DOM in order to have a nice disappear animation.

The JavaScript

One more phase to go. 😄

First, let’s target the notification-container and also let’s create a NOTIFICATION_TYPES variable which will hold all the notification types we want to have in our app:

const notificationContainer = document.getElementById('notification-container');
const NOTIFICATION_TYPES = {
    INFO: 'info',
    SUCCESS: 'success',
    WARNING: 'warning',
    DANGER: 'danger'
};

Next, let’s write a function which will create a new notification when called - the newNotification function. This function will require two parameters:

1. the type of the notification
2. the text

It’ll also return the newly created DOM element as we’ll use that in the removeNotification function to know which notification will be remove.

function addNotification(type, text) {
    // create the DIV and add the required classes
    const newNotification = document.createElement('div');
    newNotification.classList.add('notification', `notification-${type}`);

    const innerNotification = `
		<strong>${type}:</strong> ${text}
	`;

    // insert the inner elements
    newNotification.innerHTML = innerNotification;

    // add the newNotification to the container
    notificationContainer.appendChild(newNotification);

    return newNotification;
}

You can see that the structure of the component matches what we had in the HTML and what we styled in the CSS.

Finally, let’s write the removeNotification function. This will happen in two steps:

1. Add the .hide class to the notification - this will trigger the shrink animation in the CSS
2. remove the DOM element from it’s parent after 0.5 seconds, allowing the required time for the animation to take place

function removeNotification(notification) {
    notification.classList.add('hide');

    // remove notification from the DOM after 0.5 seconds
    setTimeout(() => {
        notificationContainer.removeChild(notification);
    }, 500);
}

And finally, let’s see an example of how we can use these two functions:

const info = addNotification(NOTIFICATION_TYPES.INFO, 'Info text added');
setTimeout(() => {
    removeNotification(info);
}, 5000);

I added another setTimeout for the removal and in this case the notification will be visible for 5 seconds before it’ll disappear, but you could just as easily add a button that will trigger the removeNotification function if you want. 😃

Conclusion

This is a simple demonstration of a notification feature. You can go even further and you could add:

• different positioning for the .notification-container (eg. top-left, bottom-left, bottom-right)
• a small x/close button inside the notification which would trigger the removeNotification function when clicked
• icons inside the notification

and many more!

Can’t wait to see what you’ll build and as always, make sure you share it with me!

Happy Coding! 😇