Custom Notification Template with JS

#html #css #javascript #webdev

Hello everyone today I will be discussing how to create a custom notification mini-library with HTML, SASS and Javascript. Although its a very basic notification Example but you will get the overview of how you can manage and create your own complex notifications designs.

Let's get started...

Features of This notification -

Responsiveness
Has an animation on closing notification
Easily Customizable heading, message and styling with the CSS class of yours
Browser Support ( Not completely sure about this one but I didn't use any feature or property which will break the notification in other browsers).

HTML -

<!-- Notification Container - All the nofications will go here-->
<div class="notification__container"></div>
<!-- Notification Container -->


<!-- Normal Components for the page -->
<button class="submit success">Toggle Success</button>
<button class="submit error">Toggle Error</button>
<button class="submit warning">Toggle Warning</button>
<button class="submit custom">Custom Notification</button>

All you need is create a div with class "notification__container", it is the container which will hold all the notifications.
4 buttons to show the notifications of different types - 3 default stylings (success,error and warning) and 1 custom which will take the styling from the custom CSS class.

SCSS -

// Notification styles Start here
.notification {
  max-width: 400px;
  border-radius: 5px;
  display: flex;
  align-items: start;
  gap: 2rem;
  padding: 1rem 2rem;
  transition: all 0.5s linear;
  font-family:Sans-serif;

  // Styling for the main container, as i am following BEM,
  // it is nested inside the notification class
  &__container {
    position: fixed;
    height: 80vh;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 1rem;
    overflow: auto;
  }

  &__heading{
   font-weight:300;
  }

  // Delete button Styling
  .delete {
    cursor: pointer;
    border: none;
    background: transparent;
    font-size: 1.3rem;
    color: white;
  }

  // Main Message styling 
  &__description {
    margin-top: 1rem;
    font-size:0.9rem;
    word-wrap:break-word;
  }

  //   Modifiers for success,error and warning notification
  // These are default stylings for the notifications
  &--success {
    background-color: #17B169;
    color: white;
  }

  &--error {
    background-color: crimson;
    color: white;
  }

  &--warning {
    background-color: #FFC72C;
    color: white;
  }

  @media screen and (max-width: 500px) { 
    padding:0.5rem 0.75rem;
    max-width:200px;

    &__heading{
      font-size:1rem;
    }
    &__description{
      font-size:0.7rem;
    }
  }
}

.slideOut {
  border-radius:50%;
 transform:scale(0) rotate(720deg);
}
// Notification Styles end here

Max width of the notification will be 400px and for mobile devices, it will be 200px.
Notification container will be fixed on screen even on scroll.
Description or Message section has word-wrap:break-word, it will wrap the word to a new line if it is bigger than the notification.
3 modifier Classes(--success,--error,--warning).
slideOut is the animation class for the delete button.

Javascript -

const miniNotification = ({ type, heading, message }) => {
  const notificationContainer = document.querySelector(
    ".notification__container"
  );
.
.

};

There is a main function called "miniNotification" with 3 params namely type - Type of notification ( it will take the name of css class which will style the notification), heading - Title of the notification, message - message of the notification.
Accessing the notification container using querySelector.

.
.
const notificationTemplate = () => {
    const notificationTypes = ["success", "error", "warning"];

    const newNotification = document.createElement("div");

    if (notificationTypes.includes(type)) {
      newNotification.setAttribute(
        "class",
        `notification notification--${type}`
      );
    } else {
      newNotification.setAttribute("class", `notification ${type}`);
    }

    // Notification Template
    newNotification.innerHTML = `
    <div class="notification__text">
      <h2 class="notification__heading">
        ${heading}
      </h2>
      <p class="notification__description">
       ${message}
      </p>
    </div>
    <button class="delete">x</button>
  `;

    // Adding the notification to the container
    notificationContainer.appendChild(newNotification);
  };

  notificationTemplate();
.
.

Creating an array which will have default notification types (success,error and warning)
Checking if the type passed is matching any value in the array, if it is true then set the default styling of the matching value with prefix of "notification--", else set the custom class for the notification without any prefix.
Then creating the html template with string interpolation (backtiks) and passing the heading and message their.
At the end of this function, appending the new notification to the container.

.
.
// Deleting the Notification
  notificationContainer.addEventListener("click", (e) => {
    const target = e.target;

    if (target.matches(".delete")) {
      const notification = target.closest(".notification");
      notification.classList.add("slideOut");

      setTimeout(() => {
        if (notificationContainer.contains(notification)) {
          notificationContainer.removeChild(notification);
        }
      }, 500);
    }
  });
}

Event handled for the delete button, it will check whether the clicked button has a "delete" class name, if it matches then select the closest container with the "notification" class.(Which will be the notification inside which the button is present).
Then add the "slideOut" class to the notification and using setTimeout, remove the notification from the DOM using removeChild() method after 500ms or .5s.