Password generator

Password generator

by Csaba Hellinger

HTML

<h1>Password Generator</h1>
<div id="flex">
  <button id="run" type="button">Generate</button>
  <div id="result">&nbsp;</div>
</div>

CSS

html, body {
  background: #222;
  color: #FFF;
}

#flex {
  display: flex;
  font-size: 1.2rem;
}

#run {
  background: #444;
  border: none;
  outline: none;
  padding: 0.5rem;
  color: #FFF;
  cursor: pointer;
  margin-right: 0.4rem;
}

#run:hover {
  background: #555;
}

#result {
  font-family: fixed, Courier;
  background: #444;
  color: aqua;
  padding: 0.5rem;
  width: 100%;
}

JavaScript

const LENGTH = 16;
const SPECIALS = 2;

document.querySelector('#run').onclick = () => {
  const chars = (
    'abcdefghijklmnopqrstuvwxyz' + 
    'ABCDEFGHIJKLMNOPQRSTUVWXYZ' + 
    '0123456789' + 
    '0123456789' 
  ).split('');
  const specs = '_-+:;!#()[]{}.,$£\/|=@‹›~^'.split('');
  const pickChar = () => chars.splice(Math.trunc(Math.random() * chars.length), 1)[0];
  const pickSpec = () => specs.splice(Math.trunc(Math.random() * specs.length), 1)[0];
	const pass = Array(LENGTH-SPECIALS).fill(0).map(pickChar);
  for (let i=0; i<SPECIALS; i++) {
    const index = Math.random() * pass.length;
    pass.splice(index, 0, pickSpec());
  } 
	document.querySelector('#result').innerText = pass.join('');
};