Hex2Decimal

hex2decimal.markdown

Hex2Decimal

A Pen by Oscar Sortland Kolsrud on CodePen.

License.

index.html

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

script.js

/* 
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("");
}

scripts

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

style.css

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

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />