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

Example: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>

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%;
}

JavaScript

// 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

nikhilm2302

Improve

Article Tags :

Build a PIN Pad using HTML CSS & JavaScript

Preview of Final Output

Prerequisites

Approach & Handled Use Cases

Project Structure

Similar Reads

Thank You!

What kind of Experience do you want to share?