Hey everyone. Welcome to today's tutorial. In today's tutorial, you will learn how to create an OTP input field. To build this project we need HTML, CSS and JavaScript.
This is an intermediate-level JavaScript project. Even beginners can give it a try, as I have explained each step with the help of comments.
If you are looking for more such projects to improve your JavaScript skills, you can check out this playlist here. This playlist contains more than 100 projects. The difficulty level of this project varies from easy to quite complex. Hence these projects are suitable for all kinds of JavaScript learners.
Video Tutorial:
If you are interested to learn by watching a video tutorial instead of reading this blog post, you can check out the video down below. Also, subscribe to my YouTube channel Where are post new tips tricks and tutorials regularly.
Project Folder Structure:
Before we start coding, let us take a look at the project folder structure. We create a project folder called the OTP input field. Within this folder, we have three files. These files are index.HTML,style.CSS and script.js The first file is the HTML document, the second file is the stylesheet, and finally, we have the script file.
HTML:
We begin with HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OTP Input</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="inputfield">
<input type="number" maxlength="1" class="input" disabled />
<input type="number" maxlength="1" class="input" disabled />
<input type="number" maxlength="1" class="input" disabled />
<input type="number" maxlength="1" class="input" disabled />
</div>
<button class="hide" id="submit" onclick="validateOTP()">Submit</button>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style this app using CSS. For this, once again copy the code provided to you below and paste it into a stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient(#fcf1e2 50%, #ffb800 50%);
}
.container {
width: 28em;
background-color: #ffffff;
padding: 8em 2em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 0.8em;
box-shadow: 0 45px 60px rgba(30, 22, 1, 0.3);
}
.inputfield {
width: 100%;
display: flex;
justify-content: space-around;
}
.input {
height: 3em;
width: 3em;
border: 2px solid #dad9df;
outline: none;
text-align: center;
font-size: 1.5em;
border-radius: 0.3em;
background-color: #ffffff;
outline: none;
/*Hide number field arrows*/
-moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
#submit {
background-color: #ffb800;
border: none;
outline: none;
font-size: 1.2em;
padding: 0.8em 2em;
color: #000000;
border-radius: 2em;
margin: 1em auto 0 auto;
cursor: pointer;
}
.show {
display: block;
}
.hide {
display: none;
}
.input:disabled {
color: #89888b;
}
.input:focus {
border: 3px solid #ffb800;
}
JavaScript:
Finally, we implement the functionality using JavaScript. I have explained each step with help of comments.
//Initial references
const input = document.querySelectorAll(".input");
const inputField = document.querySelector(".inputfield");
const submitButton = document.getElementById("submit");
let inputCount = 0,
finalInput = "";
//Update input
const updateInputConfig = (element, disabledStatus) => {
element.disabled = disabledStatus;
if (!disabledStatus) {
element.focus();
} else {
element.blur();
}
};
input.forEach((element) => {
element.addEventListener("keyup", (e) => {
e.target.value = e.target.value.replace(/[^0-9]/g, "");
let { value } = e.target;
if (value.length == 1) {
updateInputConfig(e.target, true);
if (inputCount <= 3 && e.key != "Backspace") {
finalInput += value;
if (inputCount < 3) {
updateInputConfig(e.target.nextElementSibling, false);
}
}
inputCount += 1;
} else if (value.length == 0 && e.key == "Backspace") {
finalInput = finalInput.substring(0, finalInput.length - 1);
if (inputCount == 0) {
updateInputConfig(e.target, false);
return false;
}
updateInputConfig(e.target, true);
e.target.previousElementSibling.value = "";
updateInputConfig(e.target.previousElementSibling, false);
inputCount -= 1;
} else if (value.length > 1) {
e.target.value = value.split("")[0];
}
submitButton.classList.add("hide");
});
});
window.addEventListener("keyup", (e) => {
if (inputCount > 3) {
submitButton.classList.remove("hide");
submitButton.classList.add("show");
if (e.key == "Backspace") {
finalInput = finalInput.substring(0, finalInput.length - 1);
updateInputConfig(inputField.lastElementChild, false);
inputField.lastElementChild.value = "";
inputCount -= 1;
submitButton.classList.add("hide");
}
}
});
const validateOTP = () => {
alert("Success");
};
//Start
const startInput = () => {
inputCount = 0;
finalInput = "";
input.forEach((element) => {
element.value = "";
});
updateInputConfig(inputField.firstElementChild, false);
};
window.onload = startInput();
If you want to support my channel and see more great content, hit that subscribe button.😍
Welcome to Learn with Daniel I'm Danial and on this channel, you'll find tutorials on HTML, CSS, and JavaScript, as well as creative UI/UX designs, CSS animations, and effects. Whether you're a beginner or an experienced developer, I hope you find my content helpful and enjoyable. My goal is to inspire and empower design-focused frontend developers & designers. Don't forget to subscribe to my channel and enable notifications by clicking the bell icon. That way, you'll be the first to know about new tutorials and resources as soon as they're released. #html #javascript #css #coding #frondend #htmlcss #javascriptprojects #programming #css #trend #viral #program #shortsvideo #shorts #youtubeshort
youtube.com
Top comments (0)