In this web development tutorial you are going to build 4 custom alert popup components using HTML CSS and JavaScript. First you will create a general alert component on witch the rest of them will depend upon, then depending on different case sceneries the alert component will either be a “Success alert“, “Info alert” , “Caution alert“, or “Danger alert“.
All 4 components will have different colors and icons depending on the type of alert.
Condition a form validation using custom alerts
Donation!
Buy me a coffee
Hi, if you like my content and you wish to give back you can buy me a coffee!
$3.00
Donation!
Buy me a Pizza
Hi, if you like my content and you wish to give back you can buy me a Pizza!
$7.00
Useful Links:
Bootstrap: https://getbootstrap.com/
Font Awesome for icons: https://fontawesome.com/
Google Fonts: https://fonts.google.com/
Timestamps
- 00:00 – Introduction.
- 00:33 – Project overview.
- 03:12 – Project setup.
- 04:37 – Create custom buttons using HTML and CSS.
- 09:41 – Build a general Alert component in HTML .
- 11:48 – Styling a general Alert component.
- 13:21 – Animate an Alert using CSS @keyframes .
- 19:23 – Create custom alert classes using CSS.b
- 29:47 – Adding click events to the buttons using javascript forEach method.
- 33:29 – Create a generic alert component in javascript.
- 38:06 – Remove the alert component from the DOM using the remove() method.
- 40:14 – Remove the alert component using a timed function.
- 42:47 – Create custom alert types (Success, Info, Caution, Danger) using javascript object.
- 45:00 – Condition diferent alert types using if statements.
- 48:15 – Part 2 submission form with alerts
- 51:55 – Styling the submission form using CSS
- 59:11 – Form validation with custom alert popup messages
Here is the source code for the alert popup components project
1 Alert components HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="style.css" />
<title>Custom Alerts</title>
</head>
<body>
<div class="container">
<h1>Custom Alert</h1>
<!-- <button class="btn btn-success" id="success">Alert success</button
><button class="btn btn-info" id="info">Alert info</button
><button class="btn btn-caution" id="caution">Alert caution</button
><button class="btn btn-danger" id="danger">Alert danger</button> -->
<form action="">
<label for="">Name</label
><input type="text" id="Name" placeholder="Enter your name" />
<label for="Age">Age</label>
<input type="number" name="" id="Age" placeholder="Enter your age" />
<label for="Email">Email</label>
<input type="email" id="Email" placeholder="Enter your email address" />
<button type="submit" class="btn btn-info">Submit</button>
</form>
</div>
<!--
<div class="alert">
<div class="alert-container">
<div class="alert-content alert-danger">
<div class="alert-header">
<span class="alert-message">Alert message</span
><span class="btn btn-close">x</span>
</div>
</div>
</div>
</div> -->
<script src="alert.js"></script>
</body>
</html>
2 Alert components CSS
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
}
.container {
width: 1220px;
margin: auto;
text-align: center;
}
h1 {
font-size: 5rem;
margin: 5rem auto;
}
/* Btn Style */
.btn {
display: inline-block;
font-weight: 500;
line-height: 1.5;
color: #212529;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3);
}
.btn-success {
background-color: #0f5132;
color: #fff;
}
.btn-danger {
background-color: #842029;
color: #fff;
}
.btn-info {
background-color: #084298;
color: #fff;
}
.btn-caution {
background-color: #664d03;
color: #fff;
}
.btn:active {
transform: scale(0.98);
box-shadow: none;
}
.btn:hover {
opacity: 0.9;
}
/* Alert Style */
.alert {
position: absolute;
top: 0;
left: 0;
display: block;
box-sizing: border-box;
z-index: 1000;
height: 100vh;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
outline: 0;
animation: fadeIm-Ou 0.3s ease;
}
@keyframes fadeIm-Ou {
0% {
transform: translateY(-200px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
.alert-container {
position: relative;
max-width: 500px;
margin: 1.75rem auto;
box-shadow: 0 0px 5px 1px rgba(0, 0, 0, 0.1);
}
.alert-content {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: inherit;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.3rem;
outline: 0;
}
.alert-header {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
padding: 1rem;
border-bottom: 1px solid #dee3e6;
background-color: inherit;
font-size: 1.2rem;
font-weight: 400;
}
.alert-success {
background-color: #cff6e4;
color: #000000;
padding-left: 4rem;
}
.alert-success::before {
font-family: "Font Awesome\ 6 Free";
font-weight: 900;
content: "\f058";
position: absolute;
left: 18px;
top: 18px;
font-size: 2rem;
color: #0f5132;
}
.alert-info {
background-color: #d5e5fd;
color: #052d68;
padding-left: 4rem;
}
.alert-info::before {
font-family: "Font Awesome\ 6 Free";
font-weight: 900;
content: "\f05a";
position: absolute;
left: 18px;
top: 18px;
font-size: 2rem;
color: #084298;
}
.alert-caution {
background-color: #fef2d0;
color: #342802;
padding-left: 4rem;
}
.alert-caution::before {
font-family: "Font Awesome\ 6 Free";
font-weight: 900;
content: "\f071";
position: absolute;
left: 18px;
top: 18px;
font-size: 2rem;
color: #664d03;
}
.alert-danger {
background-color: #f7dfe1;
color: #5b161c;
padding-left: 4rem;
}
.alert-danger::before {
font-family: "Font Awesome\ 6 Free";
font-weight: 900;
content: "\f057";
position: absolute;
left: 18px;
top: 18px;
font-size: 2rem;
color: #842029;
}
/* Form Style */
form {
margin: auto;
width: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
form label {
margin-bottom: 0.5rem;
}
form input {
width: 100%;
margin: 0.5rem 0;
padding: 0.3rem;
border: none;
border-bottom: 1px solid #084298;
outline: none;
}
form input:focus {
border-bottom: 1px solid #842029;
}
form button {
width: 100%;
margin-top: 2rem;
}
3 Alert components javaScript
const body = document.querySelector("body");
const buttons = document.querySelectorAll("button");
buttons.forEach((button) => {
button.addEventListener("click", () => {
if (button.id === "success") {
console.log("success btn");
createAlert(alert(alertType.success.class, alertType.success.message));
} else if (button.id === "info") {
createAlert(alert(alertType.info.class, alertType.info.message));
console.log("info btn");
} else if (button.id === "caution") {
createAlert(alert(alertType.caution.class, alertType.caution.message));
} else if (button.id === "danger") {
console.log("danger btn");
createAlert(alert(alertType.danger.class, alertType.danger.message));
}
});
});
function createAlert(passInAlert) {
let createAlertElement = document.createElement("alert");
createAlertElement.innerHTML = passInAlert;
body.appendChild(createAlertElement);
}
const alert = (alertClass, alertMessage) => {
// auto remove alert
setTimeout(() => {
const newAlert = document.querySelector("alert");
if (newAlert) {
removeAlert();
}
}, 4000);
// create alert
return `
<div class="alert">
<div class="alert-container">
<div class="alert-content ${alertClass}">
<div class="alert-header">
<span class="alert-message">${alertMessage}</span
><span class="btn btn-close" onclick="removeAlert()">x</span>
</div>
</div>
</div>
</div>
`;
};
function removeAlert() {
const newAlert = document.querySelector("alert");
// console.log(newAlert);
newAlert.remove();
}
const alertType = {
success: {
class: "alert-success",
message: "Your registration was successful!",
},
info: {
class: "alert-info",
message: "You need to fill out all of the fields!",
},
caution: {
class: "alert-caution",
message: "Caution, this field is not correct!",
},
danger: {
class: "alert-danger",
message: "The information you have entered is incorrect or incomplete!",
},
};
const form = document.addEventListener("submit", (e) => {
e.preventDefault();
const formInputs = document.querySelectorAll("form input");
const inputName = document.querySelector("input#Name").value;
const inputAge = document.querySelector("input#Age").value;
const inputEmail = document.querySelector("input#Email").value;
if (inputName === "" && inputAge === "" && inputEmail === "") {
createAlert(alert(alertType.danger.class, alertType.danger.message));
} else if (inputName === "") {
alertType.caution.message = "Name field is empty or incorrect!";
createAlert(alert(alertType.caution.class, alertType.caution.message));
} else if (inputAge === "") {
alertType.caution.message = "Age field is empty or incorrect!";
createAlert(alert(alertType.caution.class, alertType.caution.message));
} else if (inputEmail === "") {
alertType.caution.message = "Email field is empty or incorrect!";
createAlert(alert(alertType.caution.class, alertType.caution.message));
} else {
createAlert(alert(alertType.success.class, alertType.success.message));
formInputs.forEach((input) => (input.value = ""));
}
});
View the full video tutorial
Become a web developer!
Learn HTML CSS & Sass JavaScript Bootstrap and more...
