This project is a simple and customizable toast notification system implemented using HTML, CSS, and JavaScript. It allows you to display different types of notifications (success, error, warning, info) with dynamic content, animation, and duration control.
- Supports multiple notification types (success, error, warning, info).
- Dynamic content and title.
- Adjustable animation and display duration.
- Lightweight and easy to integrate.
- Built-in CSS
- Add Script tag to your HTML Head Tag :
<!-- Include the JavaScript file -->
<script src="https://praweensoni.github.io/notification-Style/toast.min.js" defer></script>- Add buttons or triggers for the notifications:
<body class="buttons">
<button onclick="successToast()" class="btn" id="success">Show Success</button>
<button onclick="errorToast()" class="btn" id="error">Show Error</button>
</body>- Define your toast notification logic:
function successToast() {
showToast({
type: "success",
message: "Data saved successfully!",
duration: 3000, // Duration in milliseconds
customTitle: "Great!",
});
}
const errorToast = () => {
showToast({
type: "error",
message: "Something went wrong!",
});
};
- Customize the styles to suit your needs. For example:
.toast {
color: #fff;
font-family: Arial, sans-serif;
}
This project is open-source and available under the MIT License.