Feature Coming Soon!
The newsletter functionality is under development.
This project provides a clean and user-friendly interface for account verification, commonly used in two-factor authentication (2FA) or email confirmation flows. It features a set of six input boxes designed for entering a verification code.
The key feature is the seamless user experience provided by the JavaScript logic. As the user types a digit into an input box, the focus automatically shifts to the next box, allowing for rapid code entry without needing to manually click or tab. Similarly, pressing backspace moves the focus to the previous box. The UI is built with a minimalist dark theme, ensuring it is easy on the eyes and integrates well into modern application designs.
The HTML consists of a container with a heading, a descriptive paragraph, and the six input fields for the verification code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Verify Account</title>
</head>
<body>
<div class="container">
<h2>Verify Your Account</h2>
<p>
We emailed you the six digit code to webstromtech@email.com <br />
Enter the code below to confirm your email address.
</p>
<div class="code-container">
<input
type="number"
class="code"
placeholder="0"
min="0"
max="9"
required
/>
<input
type="number"
class="code"
placeholder="0"
min="0"
max="9"
required
/>
<input
type="number"
class="code"
placeholder="0"
min="0"
max="9"
required
/>
<input
type="number"
class="code"
placeholder="0"
min="0"
max="9"
required
/>
<input
type="number"
class="code"
placeholder="0"
min="0"
max="9"
required
/>
<input
type="number"
class="code"
placeholder="0"
min="0"
max="9"
required
/>
</div>
<small class="info">
This is design only. We didn't actually send you an email as we don't
have your email, right?
</small>
</div>
<script src="script.js"></script>
</body>
</html>
The CSS provides a clean, dark-themed, and responsive layout for the verification component.
@import url("https://fonts.googleapis.com/css2?family=Muli:wght@300;700&display=swap");
* {
box-sizing: border-box;
}
body {
color: white;
background-color: #000000;
font-family: "Muli", sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.container {
background-color: #000000;
border: 3px #ffffff solid;
border-radius: 10px;
padding: 30px;
max-width: 1000px;
text-align: center;
}
.code-container {
display: flex;
align-items: center;
justify-content: center;
margin: 40px 0;
}
.code {
border-radius: 5px;
font-size: 75px;
height: 120px;
width: 100px;
border: 1px solid #eee;
margin: 1%;
text-align: center;
font-weight: 300;
-moz-appearance: textfield;
}
.code::-webkit-inner-spin-button,
.code::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.code:valid {
border-color: #3498db;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.25);
}
.info {
background-color: #ffffff;
display: inline-block;
padding: 10px;
line-height: 20px;
max-width: 400px;
color: #000000;
border-radius: 5px;
}
@media (max-width: 800px) {
.code-container {
flex-wrap: wrap;
}
.code {
font-size: 50px;
height: 70px;
max-width: 60px;
}
}
This JavaScript handles the auto-focus functionality between the input fields for a smooth user experience.
const codes = document.querySelectorAll(".code");
codes[0].focus();
codes.forEach((code, index) => {
code.addEventListener("keydown", (e) => {
if (e.key >= 0 && e.key < 9) {
codes[index].value = "";
setTimeout(() => {
codes[index + 1].focus();
}, 10);
} else if (e.key === "Backspace") {
setTimeout(() => {
codes[index - 1].focus();
}, 10);
}
});
});
Watch a live demonstration of the Verify UI component below.
The account verification UI is a critical component in modern web security. This project provides a simple yet effective implementation that prioritizes user experience. The automatic focus shifting removes friction from the code entry process, reducing user frustration and potential errors. The clean design is easily adaptable to any application's style guide.
You can easily customize this component by:
For enhanced accessibility and usability, consider adding a "paste" event listener. This would allow users to paste a copied code directly, and your JavaScript could automatically populate all the input fields at once.
Click the button below to download the full source code. Download will be ready in 10 seconds.
Receive coding tips and resources updates. No spam.
We respect your privacy. Unsubscribe at any time.