In this article, we will see how can we implement a PIN pad for entering and checking whether the PIN is valid with the help of HTML, CSS, and JavaScript.
Here, we have provided a numeric keypad/PIN pad through which the user can input the PIN. Once the user enters a PIN and hits “OK”, the code validates the PIN and provides an alert on whether the PIN is correct or not.
Preview of final output: Let us have a look at how the final output will look like.
Prerequisites
Approach & Handled Use Cases
- Create an HTML structure with a <h2> heading mentioning the project name and a main container <div> to contain all the elements. The container element with have a width of 100%.
- Create a card like structure with a width of 30% of the parent container and center it on the page by setting left and right margins as “auto”
- Here, we use flexbox for formatting the various buttons and card
- Create a read only input textbox on the top which will display the entered pin in a password format
- Create multiple rows with each row containing 3 buttons with last row containing “Del” button to delete the last entered input number and “Ok” button to submit the PIN
- Add proper styling for the elements using their class and id values
- In the JS file, first set the predefined correct PIN value to the desired numeric value
- On click of various numeric buttons present, it should append that number to the overall PIN value present on the top input control
- On click of “Del” the last entered input should be removed from the output textbox. On click of “Ok”, it should validate the PIN entered against the predefined PIN and display whether the user entered the correct PIN or not.
- User should not be able to type anything to the input box directly
- User should be able to click on the buttons and it should be reflected in the input box on the top
- All the JS click events are handled from the JavaScript file
Project Structure
Project Structure
Example:The below example code implements a basic PIN pad application using just HTML, CSS and JavaScript.
Javascript
// Script.js// Correct Pin Valuelet correctPin = "1234";
let btns = document.getElementsByClassName(
"pinpad-btn"
);
let pinInput = document.getElementById( "pinpad-input"
);for (let i = 0; i < btns.length; i++) {
let btn = btns.item(i);
if (
btn.id &&
(btn.id === "submit-btn" ||
btn.id === "delete-btn")
)
continue;
// Add onclick event listener to
// Every button from 0 - 9
btn.addEventListener(
"click",
(e) => {
pinInput.value +=
e.target.value;
}
);
}let submitBtn = document.getElementById( "submit-btn"
);let delBtn = document.getElementById( "delete-btn"
);let modal = document.getElementById("modal");
let result = document.getElementById("result");
let closeBtn = document.getElementById("close");
submitBtn.addEventListener( "click",
() => {
if (
!pinInput ||
!pinInput.value ||
pinInput.value === ""
) {
alert(
"Please enter a pin first"
);
} else if (
pinInput.value ===
correctPin
) {
alert("Correct PIN");
} else {
alert("Incorrect PIN");
}
// Reset the input
pinInput.value = "";
}
);delBtn.addEventListener("click", () => {
if (pinInput.value)
pinInput.value =
pinInput.value.substr(
0,
pinInput.value.length -
1
);
});closeBtn.addEventListener( "click",
() => {
modal.style.display = "none";
}
); |
HTML
<!-- Index.html --><!DOCTYPE html><html lang="en">
<head>
<title>Pin Pad</title>
<link rel="stylesheet"
href="./style.css"/>
</head>
<body>
<h2 class="text-center">Pin Pad</h2>
<div class="container">
<div class="card">
<div class="card-header">
<input type="password"
id="pinpad-input"
readonly />
</div>
<div>
<div class="row">
<button type="button"
class="pinpad-btn"
value="1">
1
</button>
<button type="button"
class="pinpad-btn"
value="2">
2
</button>
<button type="button"
class="pinpad-btn"
value="3">
3
</button>
</div>
<div class="row">
<button type="button"
class="pinpad-btn"
value="4">
4
</button>
<button type="button"
class="pinpad-btn"
value="5">
5
</button>
<button type="button"
class="pinpad-btn"
value="6">
6
</button>
</div>
<div class="row">
<button type="button"
class="pinpad-btn"
value="7">
7
</button>
<button type="button"
class="pinpad-btn"
value="8">
8
</button>
<button type="button"
class="pinpad-btn"
value="9">
9
</button>
</div>
<div class="row">
<button type="button"
class="pinpad-btn"
value="del
"
id="delete-btn">
Del
</button>
<button type="button"
class="pinpad-btn"
value="0">
0
</button>
<button type="button"
class="pinpad-btn"
value="ok"
id="submit-btn">
Ok
</button>
</div>
</div>
</div>
<div id="modal" class="modal">
<div class="modal-body">
<span id="close">×</span>
<p id="result"></p>
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
|
CSS
/* Style.css */.text-center {
text-align: center;
}.container { width: 100%;
}.card { border: 1px solid black;
border-radius: 5px;
width: 30%;
margin-right: auto;
margin-left: auto;
display: flex;
flex-direction: column;
}.card-header { display: flex;
justify-content: center;
margin: 10px;
text-align: center;
}.row { display: flex;
flex-direction: row;
justify-content: center;
}.pinpad-btn { width: 25%;
height: 75px;
margin: 5px;
padding: 5px;
border: 1px solid black;
border-radius: 20%;
font-size: 2em;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
background-color: white;
}.pinpad-btn:hover { background-color: lightgray;
}#pinpad-input { border-radius: 10px;
height: 1.5em;
font-size: 1.5em;
text-align: center;
width: 80%;
} |
Steps to Run application: Open the Live Server and then Please enter following URL in the link
http://localhost:5500/Output:
Output GIF