Learn how to implement OTP (One-Time Password) code verification seamlessly into your web applications with this step-by-step tutorial video. Using HTML, CSS, and JavaScript, you'll discover how to design and develop a user-friendly OTP verification system, enhancing the security of your web platform. From generating random codes to validating user input, this tutorial covers the essential aspects of OTP implementation, empowering you to safeguard user accounts effectively. Watch now and level up your web development skills!
Don't forget to like, share, and subscribe for more web development tutorials and tips. If you have any questions or need further assistance, feel free to leave a comment, and we'll be happy to help you out. Happy coding!
Like Us On Facebook: https://facebook.com/CodingWithNexusO...
Follow Us On Instagram: https://instagram.com/coding_with_nexus
Follow Us On TikTok: https://www.tiktok.com/@coding.with.n...
Visit For Full Codes: https://codingwithnexusofficial.blogs
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OTP Verification Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h4>Enter your four digit OTP</h4>
<form action="#">
<div class="input-feilds">
<input type="number" >
<input type="number" disabled>
<input type="number" disabled>
<input type="number" disabled>
</div>
<button> Verify OTP</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: rgb(195, 146, 195) ;
}
.container{
width: 300px;
height: auto;
padding: 40px 30px;
background-color: #fff;
display: flex;
border-radius: 20px;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container h4{
font-size: 20px;
color: #000;
font-family: sans-serif;
}
.container form{
width: 100%;
height:auto ;
align-items: center;
flex-direction: column;
display: flex;
padding-top: 20px;
}
form .input-feilds{
width: 100%;
height: auto;
flex-direction: row;
justify-content: space-evenly;
display: flex;
}
.input-feilds input{
max-width: 20%;
height: 60px;
border-radius: 5px;
font-size: 25px;
text-align: center;
border: none;
background: wheat;
}
.input-feilds input::-webkit-inner-spin-button,
.input-feilds input::-webkit-outer-spin-button{
display: none;
}
.input-feilds input:focus{
outline: 2px dotted black;
outline-offset: 2px;
}
form button{
margin-top: 25px;
background: wheat;
width: 90%;
color: black;
font-size: 15px;
padding: 10px 0;
font-weight: 600;
border-radius: 5px;
border: none;
cursor: pointer;
transition: all 0.2s ease ;
}
form button.active{
color: #000;
pointer-events: auto;
background: rgb(209, 157, 13);
}
form button:hover{
background: white;
border: 2px solid black;
}
script.js
const OTPinputs = document.querySelectorAll('input')
const button = document.querySelector('button')
window.onload = ()=> OTPinputs[0].focus()
OTPinputs.forEach((input)=>{
input.addEventListener('input', ()=>{
const currentInput = input
const nextInput = currentInput.nextElementSibling
if(currentInput.value.length > 1 && currentInput.value.length == 2 )
{
currentInput.value = ""
}
if(nextInput !== null && nextInput.hasAttribute('disabled') && currentInput.value !== ""){
nextInput.removeAttribute('disabled')
nextInput.focus()
}
if(!OTPinputs[3].disabled && OTPinputs[3].value !== "" ){
button.classList.add("active")
}else{
button.classList.remove('active')
}
})
input.addEventListener('keyup', (e)=>{
console.log(e);
if(e.key == "Backspace"){
if(input.previousElementSibling != null){
e.target.value = ""
e.target.setAttribute("disabled", true)
input.previousElementSibling.focus()
}
}
})
})
Comments
Post a Comment