DEV Community

Play Button Pause Button
Prince
Prince

Posted on

Enter your pin mobile ui with the html css and javascript coding.

#webdev #programming #javascript #beginners 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>Mobile Pin Entry</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #000;
            font-family: Arial, Helvetica, sans-serif;
            color:white;
        }
        .pin-display {
            margin-bottom: 30px;
            font-size: 48px;
            letter-spacing: 15px;
            font-family: 'Courier New', monospace;
        }
        .keypad {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        .keypad button {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            color: white;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
        }
        .keypad button:hover {
            transform: scale(1);
            background: rgba(255, 255, 255, 0.2);
        }
        .backspace {
            font-size: 24px;
        }
        .clear-text {
            margin-top: 20px;
            font-size: 18px;
            color: #ff4d4d;
            cursor: pointer;
            transition: color 0.3s;
        }

        .clear-text:hover{
            color:#ff8000;
        }



    </style>
</head>
<body>

    <div class="pin-display" id="pinDisplay">____</div>

    <div class="keypad">
        <button onclick="addDigit(1)">1</button>
        <button onclick="addDigit(2)">2</button>
        <button onclick="addDigit(3)">3</button>
        <button onclick="addDigit(4)">4</button>
        <button onclick="addDigit(5)">5</button>
        <button onclick="addDigit(6)">6</button>
        <button onclick="addDigit(7)">7</button>
        <button onclick="addDigit(8)">8</button>
        <button onclick="addDigit(9)">9</button>
        <button onclick="backspace()" class="backspace">⌫</button>
        <button onclick="addDigit(0)">0</button>
        <button onclick="submitPin()">  &#10004;</button>
    </div>











<script>

let pin = "";

function addDigit(digit) {
    if (pin.length < 4) {
        pin += digit;
        updateDisplay();
    }
}

function backspace() {
    pin = pin.slice(0, -1);
    updateDisplay();
}


function clearPin(){
    pin="";
    updateDisplay();
}

function updateDisplay(){
    const display=document.getElementById('pinDisplay');
    display.textContent=pin.padEnd(4,"_")
}




</script>


</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
josaphatstar profile image
josaphat •

it's helpful for me who want to learning javaScript and make new projects

Some comments may only be visible to logged-in visitors. Sign in to view all comments.