DEV Community

Cover image for Custom Notification Template with JS
Shubham Tiwari
Shubham Tiwari

Posted on

Custom Notification Template with JS

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>
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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"
  );
.
.

};
Enter fullscreen mode Exit fullscreen mode
  • 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();
.
.
Enter fullscreen mode Exit fullscreen mode
  • 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);
    }
  });
}
Enter fullscreen mode Exit fullscreen mode
  • 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.

CODEPEN - Entire code with documentation is here

THANK YOU FOR CHECKING THIS POST
You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me with some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/css-iswherehas-and-not-2afd

https://dev.to/shubhamtiwari909/theme-changer-with-html-and-css-only-4144

https://dev.to/shubhamtiwari909/swiperjs-3802

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90

Top comments (0)