One powerful tool in this arsenal is the One-Time Password (OTP) verification system. This step-by-step tutorial will guide you through the process of creating a secure OTP Code Verification Form using the dynamic trio of HTML, CSS, and JavaScript.
From crafting the structural foundation in HTML to adding style nuances with CSS and incorporating interactive elements using JavaScript, we aim to empower you with the skills needed to bolster the security of your web applications.
This tutorial is your gateway to creating a seamless and fortified OTP Code Verification Form. Let's embark on this journey of strengthening the foundations of your web development expertise.
Share this to your programmer friends. I hope y'all learnt something today, make sure to let me in the comments.
This tutorial empowers you to take control of your web development journey, leveraging the power of HTML, CSS, and JavaScript to create a fully functional website that offers a seamless user experience.
If interested in watching the video before running the code below, you can click the play button to get started.
First, create a folder with any name you like. Then, make the necessary files inside it.
Create a file called index.html to serve as the main file.
Create a file called style.css for the CSS code.
Create a file called script.js for the JavaScript code.
Finally, download the Images folder and put it in your project directory. This folder contains default showcase images for the website. You can also use your own images.
To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OTP Verification</title>
</head>
<body>
<div class="container">
<img src="verified.png" alt="">
<span>Enter OTP Code</span>
<div class="inputs">
<input maxlength="1">
<input maxlength="1">
<input maxlength="1">
<input maxlength="1">
<!-- <input maxlength="1"> -->
</div>
<button>Sumbit</button>
</div>
</body>
</html>
Next, add the following CSS codes to your style.css file to make your AI image generator website beautiful and user-friendly. You can customize the different CSS properties, such as color, background, font, etc., to give a personalized touch to your website.
* { margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to top, #56e2d7 0%, #58cff1 100%);
}
.container {
width: 400px;
display: flex;
flex-direction: column;
padding: 20px;
padding-top: 0;
text-align: center;
background: #ffffffff;
border-radius: 10px;
font: 2em sans-serif;
}
.container img {
width: 150px;
align-self: center;
}
.container div {
display: flex;
justify-content: space-around;
margin: 30px 0;
margin-bottom: 50px;
}
.container div input {
width: 70px;
height: 70px;
padding: 0 20px;
font: 40px sans-serif;
border-radius: 3px;
border: 1px solid rgba(0,0,0,.5);
}
.container div input:focus {
outline: 2px solid rgb(2, 2, 252);
}
.container button {
padding: 15px;
border: none;
outline: none;
background: blue;
color: #fff;
border-radius: 3px;
cursor: pointer;
}
Finally, add the following JavaScript code to your script.js file to make your work functional. This code handles various functions, even listeners, input handling, etc.
<script>
const inputs = document.querySelector(".inputs");
const allInputs = inputs.querySelectorAll("input");
allInputs.forEach(ini => {
ini.addEventListener("input", e => {
if(e.target.value.length === 1) {
e.target.nextElementSibling.focus();
}
})
ini.addEventListener("keydown", e => {
if(e.key === "Backspace") {
e.target.value = "";
e.target.previousElementSibling.focus();
}
})
})
</script>
0 Comments
We are happy to hear from you.