Customizable Combination Lock In JavaScript – lock.js

Category: Javascript | June 24, 2021
Author: chalda-pnuzig
Views Total: 63 views
Official Page: Go to website
Last Update: June 24, 2021
License: MIT

Preview:

Customizable Combination Lock In JavaScript – lock.js

Description:

lock.js is a JavaScript library for creating a customizable combination lock (digit lock) on the page.

It uses a series of a sequence of symbols (like letters, numbers, emojis) as a personalized code to lock/unlock something on your web app.

How to use it:

1. Include the stylesheet lock.css and JavaScript lock.min.js on the page.

<link rel="stylesheet" href="dist/lock.css" />
<script src="dist/lock.min.js"></script>

2. Generate a basic combination clock and specify the code to unlock it.

<div id="mylock"></div>
new Lock({
    id: 'mylock',
    code: 'LOCK',
});

3. Customize the symbols. Default: 10 (10 digits).

new Lock({
    id: 'mylock',
    code: 'LOCK',
    items: ['L', 'O', 'C', 'K', '🔒'],
});

4. Set the number of digit wheels. Default: 5.

new Lock({
    id: 'mylock',
    code: 'LOCK',
    wheels: 4,
});

5. Set the diameter of the lock. Default: 80.

new Lock({
    id: 'mylock',
    code: 'LOCK',
    diameter: 50,
});

6. Set the amount of time before the code can be changed again. Default: 500.

new Lock({
    id: 'mylock',
    code: 'LOCK',
    timeout: 1000,
});

7. Event handlers.

new Lock({
    onchange: (code, isOpen, moves) => {
      console.log(code, isOpen, moves);
    },
    onopen: (attempts) => {
      alert(`Open in ${attempts} attempts!`);
    },
    onclose : (attempts) => {
      alert('Close!');
    }
});

8. API methods.

// shuffle the code
lock.shuffle([min], [max], [time]);

// get the current code
lock.getCode();

// set the code
lock.setCode('css');

// get attempts
lock.getAttempts();

// check if the lock is unlocked
lock.isOpen();

Changelog:

06/24/2021

  • Improved styles

You Might Be Interested In:


Leave a Reply