Password Generator

by Nicholas Berlette

HTML

<div class="wrapper !opacity-100" style="transition:666ms opacity 333ms;opacity:0">
  <div class="app">
    <h1 class="h1 title">Password Generator</h1>
    <input type="text" id="output1" class="input-text" placeholder="32-digit nanoid" value="" />
    <input type="text" id="output2" class="input-text" placeholder="24-digit nanoid" value="" />
    <input type="text" id="output3" class="input-text" placeholder="16-digit nanoid" value="" />
    <hr class="app-divider border-t my-4 w-full h-px bg-white/0" />
    <div class="flex flex-row w-full place-items-center align-center justify-center">
      <input type="button" id="go" value="Generate Passwords" class="btn-generate" />
    </div>
  </div>
</div>

<script>
	var urlAlphabet = 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
	var  random = bytes => crypto.getRandomValues(new Uint8Array(bytes));
  
  var $ = document.querySelector.bind(document)
  var $$ = document.querySelectorAll.bind(document)
    
	const customRandom = (alphabet, defaultSize, getRandom) => {
  	defaultSize = defaultSize || 32;
    alphabet = alphabet || urlAlphabet;
    
		let mask = (2 << (Math.log(alphabet.length - 1) / Math.LN2)) - 1
		let step = -~((1.6 * mask * defaultSize) / alphabet.length)
		return (size = defaultSize) => {
			let id = ''
			while (true) {
				let bytes = getRandom(step)
				let j = step
				while (j--) {
					id += alphabet[bytes[j] & mask] || ''
					if (id.length === size) return id;
				}
			}
		}
	}

	const customAlphabet = (size, alphabet = urlAlphabet) => customRandom(alphabet, size, random);

	const nanoid = (size = 21) => {
		let id = ''
		let bytes = random(size);
		while (size--) {
			let byte = bytes[size] & 63
			if (byte < 36) {
				id += byte.toString(36)
			} else if (byte < 62) {
				id += (byte - 26).toString(36).toUpperCase()
			} else if (byte < 63) {
				id += '_'
			} else {
				id += '-'
			}
		}
		return id
	}
  
	window.nano = {
		id: nanoid,
		random: random,
		alphabet:...

TypeScript

/* const $ = document.querySelector.bind(document);
const $$ = (...args) => Array.from(document.querySelectorAll.call(document, ...args));

const toStringTag = cls => Object.prototype.toString.call()
function isInstanceOf(target: T, ...instances: unknown[]) {
 for (const i of [instances].flat(3))
   if (target instanceof i)
 		 return toStringTag(i).replace(/^[[].+ (\w+)[]]$/i, '$1')

}

 */