https://github.com/kimkee/keypad

keypad shuffle
https://github.com/kimkee/keypad

keypad password pin purescript shuffle ui

Last synced: about 2 months ago
JSON representation

keypad shuffle

• Host: GitHub
• URL: https://github.com/kimkee/keypad
• Owner: kimkee
• Created: 2022-08-04T07:08:51.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-10-17T09:30:33.000Z (over 1 year ago)
• Last Synced: 2023-10-17T13:13:54.743Z (over 1 year ago)
• Topics: keypad, password, pin, purescript, shuffle, ui
• Language: JavaScript
• Homepage: https://kimkee.github.io/keypad
• Size: 83 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## 간편비밀번호 6자리 입력 랜덤 포지션 UI

Demo : https://kimkee.github.io/keypad/

![](screenshot.png)

``` js

const keypad = {

    init: function(){

        this.kset();

    },

    cnum: 0,

    pnum: 6, /* 비번갯수 */

    pwds: document.querySelector("input.pwds"), /* 비번필드 */

    dset: function(n,v){ /* 점들 그리기 */

        const dbox = document.querySelector(".dots .dbx");

        let dot = '';

        let ac  = '';

        if(v != null){

            this.pwds.value = this.pwds.value + v;

        }

        for(let d = 0; d < this.pnum; d++){

            n > d ? ac = ' on' : ac = '';

            dot += ''+ this.pwds.value.charAt(d)+'';

        }

        dbox.innerHTML = dot;

        if( n > 0 ){

            const ldt = dbox.querySelectorAll(".dt.on").length;

            dbox.querySelector(".dt:nth-child("+ldt+")").classList.add("act");

        }

        

        if( this.cnum >= this.pnum ){

            this.cnum = this.pnum;

            this.pcom();

        };

        console.log(n, v, this.pwds.value);

    },

    kset: function(c){ /* 번호 그리기 */

        const kbox = document.querySelector(".keys .kbx");

        const norg = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

        const nums = [...norg];

        /* 랜덤 뽑기  arrs.sort( e => Math.random() - 0.5 )  */

        const choc = e => nums.splice( Math.floor( Math.random()*nums.length ) , 1)[0]; 

        let bts= '';

        let bn = '';

        let bx = 'Del';

        let bc = 'Reset';

        for(let i in norg){

            let pp = choc();

            let bt = '' + pp + '';

            console.log(i, pp, nums);

            i == 8 ? bn = bc : null;

            i == 9 ? bn = bx : null;

            bts += bt + bn;

        }

        kbox.innerHTML = bts;

        this.dset(0,null);

        this.cnum = 0;

        kbox.querySelectorAll(".bt").forEach( bt => bt.addEventListener("click", e => {

            bt.classList.contains("num") && this.pset(bt);

            bt.classList.contains("rst") && this.rset(bt);

            bt.classList.contains("del") && this.pdel(bt);

        }));

    },

    rset: function(){ /* Reset */

        this.pwds.value = '';

        setTimeout( e => this.kset(), 100);

    },

    pdel: function(){ /* Del */

        this.cnum--;

        this.cnum < 0 ? this.cnum = 0 : null;

        this.pwds.value = this.pwds.value.slice(0, -1);

        this.dset(this.cnum ,null);

    },

    pset: function(bt){ /* Number */

        this.cnum++ ;

        this.dset(this.cnum, bt.value);

    },

    pcom: e => setTimeout( e => location.reload(), 200 )  /* 모두 입력 후 */

};

document.addEventListener('DOMContentLoaded', e => keypad.init() );

```