<body>
<div class="control">
<button class="success">Show Success</button>
<button class="warning">Show Warning</button>
<button class="error">Show Error</button>
</div>
<div id="toasts"></div>
<script src="app.js"></script>
</body>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #ecf0f1;
}
button {
padding: 8px 16px;
font-size: 18px;
border-radius: 4px;
border: none;
outline: none;
color: white;
cursor: pointer;
margin: 0 10px;
}
button.success {
background-color: rgb(0, 128, 0);
}
button.warning {
background-color: rgb(255, 165, 0);
}
button.error {
background-color: rgb(255, 0, 0);
}
#toasts {
position: fixed;
top: 10px;
right: 10px;
display: flex;
flex-direction: column;
}
.toast {
padding: 20px;
border-radius: 4px;
overflow: hidden;
margin-bottom: 10px;
animation: show_slide 1s ease forwards;
display: flex;
align-items: center;
border-left: 6px solid;
}
.toast.success {
background-color: rgba(0, 128, 0, 0.4);
border-color: rgb(0, 128, 0);
}
.toast.warning {
background: rgba(255, 165, 0, 0.4);
border-color: rgb(255, 165, 0);
}
.toast.error {
background-color: rgba(255, 0, 0, 0.4);
border-color: rgb(255, 0, 0);
}
.toast i {
font-size: 28px;
color: white;
}
.toast .msg {
padding: 0 20px;
font-size: 16px;
color: white;
}
.countdown {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
z-index: 1;
animation: countdown 4s linear forwards;
}
.toast.success .countdown {
background-color: rgb(0, 128, 0);
}
.toast.warning .countdown {
background-color: rgb(255, 165, 0);
}
.toast.error .countdown {
background-color: rgb(255, 0, 0);
}
@keyframes countdown {
20% {
width: 100%;
}
100% {
width: 0;
}
}
@keyframes show_slide {
0% {
transform: translateX(100%);
}
40% {
transform: translateX(-10%);
}
80% {
transform: translateX(0%);
}
100% {
transform: translateX(-10px);
}
}
@keyframes hide_slide {
0% {
transform: translateX(-10px);
}
40% {
transform: translateX(0%);
}
80% {
transform: translateX(-10%);
}
100% {
transform: translateX(120%);
}
}
const buttonShows = document.querySelectorAll('.control button')
buttonShows.forEach((btn) => {
btn.addEventListener('click', (e) => {
createToast(e.target.getAttribute('class'))
})
})
const toasts = {
success: {
<a href="https://nodemy.vn/cach-su-dung-boostrap-icon-va-font-awesome-icon-vao-trong-react-js/">icon</a>: '<i class="fas fa-check-circle"></i>',
msg: '<a href="https://nodemy.vn/hieu-arrow-function-va-this-trong-javascript-tao-ra-nhung-ham-manh-me-voi-cu-phap-ngan-gon-huong-dan-day-du-cho-nguoi-moi-bat-dau-important/">This</a> is a success message !',
},
error: {
icon: '<i class="fas fa-exclamation-triangle"></i>',
msg: 'This is a error message !',
},
warning: {
icon: '<i class="fas fa-exclamation-circle"></i>',
msg: 'This is a warning message !',
},
}
<a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> createToast(status) {
let toast = document.createElement('div')
toast.className = `toast ${status}`
toast.innerHTML = `
${toasts[status].icon}
<span class="msg">${toasts[status].msg}</span>
<span class="countdown"></span>
`
document.querySelector('#toasts').appendChild(toast)
setTimeout(() => {
toast.style.animation = 'hide_slide 1s ease forwards'
}, 4000)
setTimeout(() => {
toast.remove()
}, 6000)
}
LỘ TRÌNH LÊN FULLSTACK, trọn bộ serial course Pro HTML,CSS,JAVASCRIPT MIỄN PHÍ :
HTML : HTML căn bản cho người mới bắt đầu
CSS : CSS căn bản cho người mới bắt đầu
JS: Javascript cho người mới bắt đầu
