Using HTML, CSS, and JavaScript, we will develop an email validator in this article. We will create and utilise this Email Validation API to validate a given email address. This blog aims to teach readers how to utilise the Email Validation API in conjunction with HTML, CSS, and JavaScript to build a functional website.
HTML Structure of Email Validator
We’ll build our email validator using a straightforward HTML framework. We will now begin constructing a form, whereby the required email address and a button for submitting the data will be entered. Now the output is the only thing remaining. The output portion will likewise be included as a regular container.
This is the unstyled HTML code for our email validator.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iValidate - Email Validator for your Business</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav>
<div class="logo">
<img src="img/email.svg" alt="email svg">
<span>iValidate</span></div>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">About</a></li>
<li><a href="/">Contact Us</a></li>
</ul>
</nav>
</header>
<main>
<div class="container">
<h1>Enter your email to validate</h1>
<form action="/submit" method="post">
<!-- Input Filed to Validate Email Address -->
<input placeholder="Enter your email to validate" type="text" id="username" name="username" required>
<br><br>
<!-- Submit button -->
<input id="submitBtn" class="btn" type="submit" value="Submit">
</form>
</div>
<div class="container">
<h2>Your Results</h2>
<div id="resultCont">
Your results will show here
</div>
</div>
</main>
<footer>
Copyright | iValidate.com | All Rights reserved
</footer>
<script src="js/index.js"></script>
</body>
</html>Readers should be aware that the navigation bar contains links like “/about” and “/contact.” These are placeholder pages that you can add to your website if you’d like.
This is what our website will look like once the fundamental HTML framework has been added:
Enhancing our Email Validator Website using CSS
We’re going to incorporate media queries and CSS styles to make our email validator website responsive. This will make using our email validator on mobile devices easier. Untidy HTML code can be seen in its raw form. Let’s decorate our email validator by adding the CSS listed below:
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,700;1,300&family=Poppins:wght@300;400;500;600&display=swap');
* {
padding: 0;
margin: 0;
font-family: 'Noto Sans', sans-serif;
font-family: 'Poppins', sans-serif;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
background-color: black;
color: white;
padding: 19px 12px;
}
ul {
display: flex;
}
ul li {
list-style: none;
padding: 0 13px;
}
ul li a{
color: white;
text-decoration: none;
}
ul >li> a:hover{
color: rgb(192, 189, 205);
}
main{
min-height: 100vh;
}
.logo img{
width: 15px;
filter: invert(1);
}
.container{
max-width: 80vw;
margin: auto;
padding: 9px 15px;
}
.container h1{
padding: 12px 0;
}
input[type='text']{
min-width: 23vw;
padding: 3px 12px;
border: 2px solid black;
border-radius: 4px;
font-size: 20px;
}
.btn{
background: black;
color: white;
padding: 9px 12px;
border: 1px solid gray;
border-radius: 6px;
cursor: pointer;
}
#resultCont div::first-letter{
text-transform: uppercase;
}
footer{
font-size: 12px;
background-color: black;
color: white;
display: flex;
padding: 12px;
display: flex;
justify-content: center;
align-items: center;
}
@media only screen and (max-width: 600px)
.container{
font-size: 12px;
}
input[type='text'] {
width: 100%;
}
nav{
flex-direction: column;
}
.logo{
padding: 6px 0;
font-size: 12px;
}
.logo span{
font-size: 20px;
}
.logo img{
width: 15px;
filter: invert(1);
}
}
Following the addition of all necessary styles, our webpage will seem as follows:
Our work on the front end is complete. We will now begin developing the logic for gathering and validating email addresses using the Email Validation API.
Adding the Logic with JavaScript
For this application, Email Validation API will be used. We have a powerful email validation API from EmailValidation.io, which is ideal for our email validation application. Go to this page to register and establish an account. You can make use of the free plan, which grants us 100 free requests and one API key each month. You can buy an API subscription if you need it for a large-scale application.
First, let’s make a new file in the js subdirectory named index.js. We will now use the following code in index.js to use the Email Validation API to validate emails.
The explanation
Now let’s examine the code. The submitBtn button’s default action of submitting the form is prevented by the addition of an event listener to this code. Calling the preventDefault() function accomplishes this. Next, a message indicating that the button has been clicked is logged to the console by the code. This is purely for debugging. The resultCont element’s contents are then cleared by the code. The validation outcomes will be shown in this part. The API key is then retrieved by the code from the key variable. The Email Validation API request is authenticated using the API key.
let key = "YOUR-API-KEY"The email address that will be validated is now obtained by the code from the username input element. The code then creates the Email Validation API URL. The email address that will be verified and the API key are both included in the URL. Subsequently, the code queries the Email Validation API.
To guarantee that the API call is finished before the remaining code is executed, the await keyword is utilised. Lastly, the code parses the API response into JSON. The validation’s outcomes are contained in the JSON response. The returned object’s properties are then iterated over by the code. The code verifies that each property’s value is not a space or empty.
Conclusion
I hope you found our HTML, CSS, and JavaScript email validator useful. Check out this Netflix Clone Project, where we used JavaScript, HTML, and CSS to construct a Netflix Clone. I hope you gained some new knowledge. Have fun coding!
