Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Hex2Decimal
<div class="container">
<div class="panel panel-default">
<div class="row">
<h3 class="panel-title">Hex Converter</h3>
</div>
<div class="panel-body">
Hexidecimal use the following characters:<br>
123456789ABCDE
<div class="form-group">
<input id="myHex" class="form-control" type="input" />
<br>
<input id="submit" class="btn btn-default" type="button" value="Calculate" onclick="calculate()" />
<input id="reset" class="btn btn-default" type="button" value="Reset" onclick="reset()" />
</div><hr />
<b>Answer:</b>
<div id="answer" class="answer"></div>
<div id="answer2" class="answer"></div>
</div>
</div>
/*
Hex calculator - created this to help me understand how to convert hex to decimal
I ran into a problem with JS precision can working with very large numbers. Imported Big.js library to get expected results.
Used this formula: 7DE = (7 * 16^2) + (13 * 16^1) + (14 * 16^0)
Hexadecimal: 123456789ABCDEF A = 10, B = 11, C = 12; D = 13; E = 14; F = 15
value * 16 to the power of the value's place x*16^y
Used https://www.binaryhexconverter.com/hex-to-decimal-converter to check calculations.
Added binary conversion function called "toBin()"
*/
var node = document.getElementById("answer");
var node2 = document.getElementById("answer2");
function calculate() {
var inputValue = document.getElementById("myHex").value;
//var node = document.getElementById("answer")
inputValue = inputValue.toUpperCase();
var array = inputValue.split("");
//reverse array to ensure values match place number found in "index" array
array = array.reverse();
//letters in "array" replaced with corresponding number
var arrayNew = [];
var ans = [];
var index = [];
var calc;
for (var i = 0; i < array.length; i++) {
//switch changes hex letters to numbers
switch (array[i]) {
case "A":
array[i] = "10";
break;
case "B":
array[i] = "11";
break;
case "C":
array[i] = "12";
break;
case "D":
array[i] = "13";
break;
case "E":
array[i] = "14";
break;
case "F":
array[i] = "15";
break;
}
arrayNew.push(parseInt(array[i], 10));
index.push(i);
var t = new Big(16);
var z = t.pow(index[i]);
//z = z.toString();
calc = new Big(arrayNew[i]);
var s = calc.times(z);
ans.push(s);
}
function getSum(total, num) {
var x = new Big(total);
var y = x.add(num);
return y;
}
var answer = ans.reduce(getSum);
var remove = node.childNodes[0];
if (!remove) {
//
} else {
node.removeChild(node.childNodes[0]);
node2.removeChild(node2.childNodes[0]);
}
if (answer > 9223372036854775807) {
node.appendChild(
document.createTextNode("Must be smaller than 7FFFFFFFFFFFFFFF")
);
} else {
node.appendChild(document.createTextNode("Decimal: " + answer));
node2.appendChild(document.createTextNode("Binary: " + toBin(answer)));
}
}
function reset() {
document.getElementById("myHex").value = "";
node.removeChild(node.childNodes[0]);
node2.removeChild(node2.childNodes[0]);
}
function toBin(num) {
var divBy2 = [];
var quo = [];
var bits = [];
var bit;
var quotient;
var remain;
divBy2.push(num); //insert the initial number
quotient = Math.floor(num / 2);
quo.push(quotient);
divBy2.push(quotient);
bit = num % 2;
bits.push(bit);
do {
quotient = Math.floor(quotient / 2);
quo.push(quotient);
divBy2.push(quotient);
} while (quotient > 0);
divBy2.pop(); //removes 0 that is not needed from end of array
for (var i = 1; i < divBy2.length; i++) {
bit = divBy2[i] % 2;
bits.push(bit);
}
return bits.reverse().join("");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/big.js/5.2.2/big.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"></script>
body{
background: #4fc3f7
}
.container{
background: #ffffff;
width: 450px;
height: 370px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#myHex{
font-size: 1.5em
}
.row{
background: #65499c;
color: #ffffff;
padding-left: 20px;
margin-bottom:20px;
}
#submit{
background: #65499c;
color: #ffffff
}
.answer{
font-size: 1em;
margin-left: 1px;
}
.form-group{
margin-top:15px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.