p {
  margin-bottom: 0.25em;
  font-size: 18px;
  font-weight: bold;
}

const sha256 = async (text) => {
    const uint8  = new TextEncoder().encode(text)
    const digest = await crypto.subtle.digest('SHA-256', uint8)
    return Array.from(new Uint8Array(digest)).map(v => v.toString(16).padStart(2,'0')).join('')
}

// ランダムな16バイトのソルトを生成する
const salt = crypto.getRandomValues(new Uint8Array(16)).toString('hex');

const test1 = document.querySelector('.hash_input').textContent;

sha256(test1).then(hash => {
  console.log(hash)
  document.querySelector('.hash_output').textContent = hash;
});

const test2 = document.querySelector('.hash_input2').textContent;

sha256(test2 + salt).then(hash => {
  console.log(hash)
  document.querySelector('.hash_output2').textContent = hash;
});