Skip to content

Instantly share code, notes, and snippets.

@emmsdan
Created July 24, 2020 11:37
Show Gist options
  • Save emmsdan/011ef061f69a0a33d36fc418290f5c5a to your computer and use it in GitHub Desktop.
Save emmsdan/011ef061f69a0a33d36fc418290f5c5a to your computer and use it in GitHub Desktop.
function generateKeyPad (options, callback) {
const btnSize = {
button: (options.size === 1 ? '15%' : options.size === 2 ? '20%' : '32%') + ' !important',
clear: (options.size === 1 ? '31%' : options.size === 2 ? '41%' : '32%') + ' !important'
}
// Define stylesheet
const styleSheet = `
.input-container {
width: 100% !important;
display: flex !important;
flex-wrap: wrap !important;
border-radius: 10px !important;
font-family: 'Ubuntu' !important;
box-sizing: border-box !important;
font: 71%/1.5 !important;
text-align: center !important;
}
.input-container button {
min-width: ${btnSize.button};
max-width: ${btnSize.button};
height: 50px !important;
margin: .1rem !important;
font-size: 1.3rem !important;
text-align: center !important;
background: #fff !important;
border: .5px solid #ccc !important;
border-radius: 5px !important;
outline: none !important;
font-weight: 500 !important;
}
.input-container button:hover {
position: relative !important;
top: 1px !important;
left: 1px !important;
border-color: #e5e5e5 !important;
cursor: pointer !important;
}`;
let display, enter
if (options.display) {
display = document.querySelector (options.display)
}
const otp = document.querySelector (options.formField || '#otp')
const container = document.querySelector (options.container)
const stylesheet = document.createElement('style');
stylesheet.innerHTML = styleSheet;
container.appendChild(stylesheet);
const createDiv = document.createElement ('div')
createDiv.setAttribute ('class', 'input-container')
const createClearButton = document.createElement ('button')
createClearButton.innerText = 'CLEAR'
createClearButton.addEventListener ('click', () => {
updateDisplay (null)
})
createClearButton.setAttribute ('type', 'button')
createClearButton.setAttribute('style', `min-width: ${btnSize.clear}; width: ${btnSize.clear}`);
createDiv.appendChild (createClearButton)
if (options.submitButton) {
enter = document.querySelector (options.submitButton)
}
// storing a copy of the value so that, when a user manually inspect the rendered component, and edits it,
// the true value will remain unchanged
var PINVALUE = '';
if (options.submitButton) {
enter.addEventListener ('click', () => {
callback (getOTP ())
})
}
function updateDisplay (value) {
if (value !== 0 && !value) {
if (options.display) display.innerHTML = ''
otp.value = ''
PINVALUE = ''
return
}
if (options.display) display.innerHTML += '*'
otp.value += value
PINVALUE += value
}
function getOTP () {
if (otp.value && otp.value !== PINVALUE) return 'error'
return PINVALUE
}
function getRandomNumber (input) {
let array = [0, 1, 2, 3, 4, 6, 7, 5, 8, 9].sort ((a, b) => 0.5 - Math.random ())
array.forEach (item => {
const newBtn = document.createElement ('button')
const newContent = document.createTextNode (item)
newBtn.setAttribute ('type', 'button')
newBtn.appendChild (newContent)
newBtn.addEventListener ('click', () => {
updateDisplay (item)
})
input.prepend (newBtn)
})
}
getRandomNumber (createDiv, 9)
container.appendChild (createDiv)
}
window.generateKeyPad = generateKeyPad
// Useage
generateKeyPad({
container: '#pinContainer',
submitButton: '#SubmitButton',
formField: '#PIN',
size: 1 // for style sheet default to 3
}, (value) => {
console.log(value)
})
@emmsdan
Copy link
Author

emmsdan commented Jul 24, 2020

I may need to clean this up and make it into an npm module just for the fun of it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment