Hamming Distance Calculator
Jul 21, 2019 Update: Aug 28, 2021
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 {
border: 1px solid #131f2d;
background: #142944;
color: #fff;
padding: 6px 10px;
font-size: 14px;
border-radius: 3px;
cursor: pointer;
}
#calculate:hover {
background: #203754;
}
#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
}
}