1.0.9 • Published 2 years ago
sweet-pin v1.0.9
Sweet Pin JS
created by Anwar Achilles
Simple JS pin gadget, develop with vanilla JS can control length/disabe/button and secure input data in JS with callback function for action.
Get Started
:)
Install Via NPM
$ npm install --save-dev sweet-pin
Import module and set option
import { SweetPin } from 'sweet-pin';
SweetPin.option({
// target: ".sweet-pin",
// range: 6,
// disable: true,
// disableOnSuccess: true,
success: function() {
// do something here
// this.response | this.result
}
});
Install File Manually
JS instance object
new SweetPin({
// target: ".sweet-pin",
// range: 6,
// disable: true,
// disableOnSuccess: true,
success: function() {
// do something here
// this.response | this.result
}
});
HTML structure
<!-- Sweet Pin Parent -->
<div class="sweet-pin">
<!-- child for input pin -->
<div class="pin-head">
<input type="text" name="pin" id="pin" placeholder="SERIAL"/>
</div>
<!-- child for button pin -->
<div class="pin-body">
<!-- number 1-9 -->
<button value="1">1</button>
<button value="2">2</button>
<button value="3">3</button>
<button value="4">4</button>
<button value="5">5</button>
<button value="6">6</button>
<button value="7">7</button>
<button value="8">8</button>
<button value="9">9</button>
<!-- delete/clear -->
<button value="delete">×</button>
<!-- number 0 -->
<button value="0">0</button>
<!-- null/submit -->
<button value="submit" type="submit">✓</button>
</div>
</div>
note important .pin-head & .pin-body
Option
target (element)
Parent element's Query selector
range (integer)
Max length of Pin inputed
disable (boolean)
Disable/Enable input if pin ready
disableOnSuccess (integer)
Disable/Enable if submit clicked
success (function)
Callback function triggered if pin already filled
ready (function)
Alias of success option
Donate
karyakarsa.com : karyakarsa.