Online tool for calculating the Hamming Distance between strings and numbers. Calculation is done in the browser, no data is sent to the backend.

String ASCII Binary Hex Bit-level calculation
HTML
CSS
JavaScript
<div id="calculator">
  <div id="calculator-top">
    <span id="input-type">
      <label>Input Mode</label>
        <input type="radio" name="type" value="str" checked> String
        <input type="radio" name="type" value="dec"> ASCII
        <input type="radio" name="type" value="bin"> Binary
        <input type="radio" name="type" value="hex"> Hex
    </span>
    <span id="bit-level-span"><input type="checkbox" name="bit-level"> Bit-level calculation</span>
  </div>
  <div id="inputs">
    <input type="text" id="input1" placeholder="Input 1" />
    <input type="text" id="input2" placeholder="Input 2" />
  </div>
  <div id="calc-result">
    <button id="calculate">Calculate</button>
    <div id="result"></div>
  </div>
</div>
.applet-body {
  border: none !important;
}

#calculator {
  margin-top: 30px;
}
#calculator-top {
  margin-bottom: 5px;
}
#calculator-top span {
  margin-right: 80px;
}
#inputs {
  display: flex;
  flex-direction: row;
  margin: 10px 0;
}
#inputs input {
  width: 50%;
  padding: 5px;
  font-size: 14px;
  color: #404040;
}
#input-type label {
  font-weight: bold;
  color: #404040;
  margin-right: 10px;
}
#calc-result {
  text-align: center;
}
#calculate {
  font-size: 15px;
  border-radius: 5px;
}
#result {
  margin-top: 10px;
  font-weigth: bold !important;
  font-size: 25px;
}
document.querySelector('#calculate').onclick = function() {
  const inputType = document.querySelector('input[name="type"]:checked').value;
  const input1 = document.querySelector('#input1').value;
  const input2 = document.querySelector('#input2').value;
  const distance = calcHammingDistance(inputType, input1, input2);
  document.querySelector('#result').innerText = distance;
}

document.querySelectorAll('input[name="type"]').forEach(el => {
  el.onclick = function() {
    const bitLevelSpan = document.querySelector('#bit-level-span');
    if (this.value === 'str') {
      bitLevelSpan.style.visibility = 'visible';
    } else {
      bitLevelSpan.style.visibility = 'hidden';
    }
  };
});

function calcHammingDistance(type, input1, input2) {
  if (input1.length !== input2.length) return new Error('Error: Inequal lengths');
  const bitLevel = document.querySelector('input[name="bit-level"]').checked;
  let distance = 0;
  if (type === 'str' && !bitLevel) {
    input1.split('').forEach((char, idx) => {
      if (char !== input2[idx]) distance++;
    });
    return distance;
  } else {
    if (type === 'str') {
      let distance = 0;
      input1.split('').forEach((char, idx) => {
        const charACode = char.charCodeAt(0);
        const charBCode = input2[idx].charCodeAt(0);
        distance += calc(charACode, charBCode);
      });
      return distance;
    } else if (type === 'bin') {
      input1 = parseInt(input1, 2);
      input2 = parseInt(input2, 2);
    } else if (type === 'hex') {
      input1 = parseInt(input1, 16);
      input2 = parseInt(input2, 16);
    }

    return calc(input1, input2);
  }

  function calc(input1, input2) {
    console.log(input1.toString(2), input2.toString(2))
    let distance = 0;
    let xored = input1 ^ input2;
    while (xored) {
      const ored = xored & 1;
      if (ored) distance++;
      xored = xored >> 1;
    }
    return distance
  }
}