<style>
/* Toaster Container */
.toaster {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
}
/* Toaster Notification */
.toast {
background-color: #333;
color: #fff;
padding: 15px 20px;
margin-bottom: 10px;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
opacity: 0;
transform: translateX(100%);
transition: all 0.5s ease;
}
.toast.show {
opacity: 1;
transform: translateX(0);
}
.toast.success {
background-color: #4caf50;
}
.toast.error {
background-color: #f44336;
}
</style>
<body>
<div class="toaster" id="toaster"></div>
</body>
<script>
const showToast = (message, type) => {
const toaster = document.getElementById('toaster');
const toast = document.createElement('div');
toast.className = `toast ${type}`;
toast.textContent = message;
toaster.appendChild(toast);
toast.classList.add('show');
setTimeout(() => {
toast.classList.remove('show');
setTimeout(() => toaster.removeChild(toast), 500);
}, 3000);
};
// Example usage
showToast('Details Updated', 'success');
showToast('Updation failed', 'error');
</script>