const $ = s => document.querySelector(s);
const n = s => $(`[name=${s}]`);

const qr = new QRious({element: $('img'), size: 250});

const c = 'change';
const w = (i, e, f) => i.addEventListener(e, f);

['png', 'jpeg'].forEach(x => {
  const e = n(x);

  w(e, 'click', () => {
    const a = document.createElement('a');
    a.href = qr.toDataURL(`image/${x}`);
    a.download = `qr-code.${x}`;
    a.click();

    setTimeout(() => a.remove(), 50);
  });
});

const a = (e, b) => { const i = n(b); w(i, e, () => { qr[b] = i.value || null; }); };

['background', 'backgroundAlpha', 'foreground', 'foregroundAlpha', 'level'].forEach(e => a(c, e));

a('input', 'value')

const p = n('padding');
w(p, c, () => { if (p.validity.valid) { qr.padding = p.value !== '' ? p.value : null; } });

const s = n('size');
w(s, c, () => { if (s.validity.valid) { qr.size = s.value || null; } });