Build a PIN Pad using HTML CSS & JavaScript
Last Updated :
26 Nov, 2024
In this article, we will see how to 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 what 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 StructureExample:The below example code implements a basic PIN pad application using just HTML, CSS and JavaScript.
HTML
<!-- Index.html -->
<html>
<head>
<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>
/* 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%;
}
// Script.js
// Correct Pin Value
let 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";
}
);
Output
Build a PIN Pad using HTML CSS & JavaScript
Similar Reads
Build a Piano using Html, CSS and JavaScript In this article, we will build a piano using HTML, CSS, and JavaScript. A piano is a musical instrument consisting of different keys that produce different sounds to create a sweet musical sound when used in a particular sequence. Similarly, a piano app also contains keys that produce different soun
4 min read
Pin Ball Game using HTML CSS & JavaScript Pinball is a classic arcade game that has been around since the 1930s. It involves the player using flippers to hit a ball around a table aiming to score points by hitting various targets and obstacles. PrerequisitesHTMLCSSJavaScriptApproachThe pinball game operates by moving a ball within a confine
4 min read
How To Build Notes App Using Html CSS JavaScript ? In this article, we are going to learn how to make a Notes App using HTML, CSS, and JavaScript. This project will help you improve your practical knowledge in HTML, CSS, and JavaScript. In this notes app, we can save the notes as titles and descriptions in the local storage, so the notes will stay t
4 min read
Build a Virtual Keyboard using HTML CSS & JavaScript In this article, we will build a virtual keyboard using HTML, CSS, and JavaScript. A virtual keyboard is a user interface component that allows users to input text by clicking on the keys displayed on the screen. Our keyboard will support standard alphanumeric characters, special characters, and a C
4 min read
Build A Drag & Drop Kanban Board using HTML CSS & JavaScript A Kanban board is a project management tool designed to visualize work, limit work in progress, and maximize efficiency. With drag & drop functionality, users can easily move tasks between different stages of completion, providing a visual representation of the workflow. Final OutputApproach:The
4 min read