Hamming Distance Calculator

Jul 21, 2019

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
  }
}