This repository has been archived by the owner on Oct 1, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
/
hammingdistance.html
142 lines (113 loc) · 3.23 KB
/
hammingdistance.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hamming</title>
<style>
body{
background: #0d1521;
font-family: tahoma;
color: #989898;
text-align: center;
}
.container{
max-width: 70%;
margin: 0 auto;
}
input{
width: 70%;
padding: 20px;
background:#181c22;
border: 0;
float: left;
font-size: 20px;
color: #989898;
margin-top: 40px;
}
button{
padding: 20px;
width: 20%;
float: left;
background: #23282e;
border: 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
font-size: 20px;
margin-top: 40px;
}
#result{
clear: both;
color: white;
font-size: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#display{
padding-top: 10px;
font-family: cursive;
width: 70%;
margin: 40px;
clear: both;
}
em{
font-size: 20px;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>Hamming Distance Calculator</h1>
<form id="hammingForm">
<input type="text" class="col-m-8 col-8" id="stringInput"
placeholder="Enter two texts/string seperated by a comma">
<button type="submit" class="col-m-3 col-3" id="btn">Calculate</button>
</form>
<div id="display" class="col-10 col-m-10"><p>Hamming distance between two strings of equal lenght is the number of
positions at which the corresponding symbols are different </p>
<p id="result"></p>
</div>
</div>
<script>
document.getElementById( 'hammingForm' ).addEventListener( 'submit', hamming );
//clears the result message
document.getElementById( 'stringInput' ).addEventListener('focus', function(){
let result = document.getElementById('result');
if( result.value !== '' ){
result.innerHTML = '';
}
});
function hamming( event ){
let count = 0, stringVal, splittedValue, firstString, secondString;
//To prevent the form from submitting by default
event.preventDefault();
//Retrieve the input value
stringVal = document.getElementById('stringInput').value;
if(stringVal === '' || stringVal === null || !stringVal.includes( ',' )
|| ( /^[a - ZA - Z0 - 9]/.test(stringVal) ) ){
document.getElementById( 'result' ).innerHTML = '<em>Error: Pls,\
Enter two texts/string seperated by a comma</em>';
return;
}
splittedValue = stringVal.toLowerCase().split( ',' );
firstString = splittedValue[ 0 ].trim();
secondString = splittedValue[ 1 ].trim();
//Check if the length of the two texts has equal lengths
if( firstString.length !== secondString.length ){
document.getElementById( 'result' ).innerHTML = '<em>Error: Make sure\
the length of the strings are equal</em>';
return;
}
//Increment count by 1 if the corresponding symbols are different at a particular position
for( let i = 0; i < firstString.length; i++ ){
if( firstString[ i ] !== secondString[ i ] ){
count += 1;
}
}
document.getElementById( 'result' ).innerHTML = 'The hamming distance is: '+count;
}
</script>
</body>
</html>