Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<head>
    <style>
        .password__info {
            max-width: 130px;
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-gap: 10px;
            margin: 0 auto;
            margin-bottom: 70px;
        }
​
        .pin-circle {
            width: 10px;
            height: 5px;
            background-color: red;
        }
​
        .pin-circle.entered {
            background-color: blue;
        }
​
        .password__wrap {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }
​
        .keypad--button {
            padding: 15px;
        }
    </style>
</head>
​
<body>
​
    <section class="password">
        <input type="text" maxlength="6" class="password__value">
        <div class="password__info">
            <div class="pin-circle"></div>
            <div class="pin-circle"></div>
            <div class="pin-circle"></div>
            <div class="pin-circle"></div>
            <div class="pin-circle"></div>
            <div class="pin-circle"></div>
        </div>
​
        <div class="password__wrap">
            <button class="keypad--button" data-value="1">1</button>
            <button class="keypad--button" data-value="2">2</button>
            <button class="keypad--button" data-value="3">3</button>
​
            <button class="keypad--button" data-value="4">4</button>
            <button class="keypad--button" data-value="5">5</button>
            <button class="keypad--button" data-value="6">6</button>
​
            <button class="keypad--button" data-value="7">7</button>
            <button class="keypad--button" data-value="8">8</button>
            <button class="keypad--button" data-value="9">9</button>
​
            <button class="keypad--button keyboard--button__back-arrow">удалить одно значение</button>
            <button class="keypad--button" data-value="0">0</button>
            <button class="keypad--button keyboard--button__x">удалить всё значение</button>
        </div>
        
    </section>
    
​
</body>
​
<script type="text/javascript">
​
    (function() {
​
    function initKeypad() {
        let disableInput = false;
        let _pinArray = [];
        let count = 6;
        let input = document.querySelector('.password__value');
    document.querySelectorAll(".keypad--button[data-value]").forEach(el => {
      el.addEventListener("click", evt => {
        
        if (input.value.length >= count) return false;
        if (disableInput) {
          return;
        }
        input.value += el.innerHTML;
        const value = evt.target.attributes["data-value"].value;
        if (_pinArray.length < count) {
          _pinArray.push(value);
          bindPinToDisplay(_pinArray);
        }
      });
    });
​
​
      function bindPinToDisplay(pinArray, pinStatus) {
    document.querySelectorAll(".pin-circle").forEach((el, index) => {
      if (pinStatus === "success") {
        el.classList.add("success");
      } else if (pinStatus === "error") {
        el.classList.add("error");
      } else if (index > pinArray.length - 1) {
        el.classList.remove("entered");
        el.classList.remove("success");
        el.classList.remove("error");
      } else {
        el.classList.add("entered");
      }
    });
​
  }
​
    document.querySelector(".keyboard--button__back-arrow").addEventListener("click", () => {
        _pinArray.pop();
        bindPinToDisplay(_pinArray);
      });
​
    document.querySelector(".keyboard--button__x").addEventListener("click", () => {
        input.value = '';
        _pinArray = [];
        bindPinToDisplay(_pinArray);
      });
   
  }
​
​
  initKeypad();
})();
    
</script>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers