fiddle.html

## fiddle.html
  <body>
    <p>Decimal: <input type="text" id="txtDecimal" value="5"><input type="submit" id="btnGoDecimal" value="Go"></p>
    <p>Binary (MSB first): <input type="text" id="txtBinary" value="101"><input type="submit" id="btnGoBinary" value="Go"></p>
    <p>
      Bit position (LSB is zero): <input type="number" id="numBit" value="0" min="0" max="128"><input type="submit" id="btnGet" value="Get">
      <input type="submit" id="btnSet0" value="Set to 0"><input type="submit" id="btnSet1" value="Set to 1">
    </p>
    <p id="pResult"></p>
  </body>

## fiddle.js
window.onload = function() {
    var myNumber;

    var toBinary = function (number) {
        var bitArray = [];
        while (number > 0) {
            bitArray.push(number % 2);
            number >>= 1;
        }
        bitArray.reverse();
        return bitArray;
    };

    var toDecimal = function(bitArray) {
        var decimal = 0;
        for (var i = 0; i < bitArray.length; ++i) {
            decimal += bitArray[i]*Math.pow(2, bitArray.length-1-i);
        }
        return decimal;
    };

    var getBit = function(number, index) {
        var mask = (1 << index);
        //
        // TODO: operator precedence matters
        //
        return (number & mask) > 0 ? 1 : 0;
    };

    var setBit = function(number, index, set) {
        var mask = 1 << index;
        return set ? number | mask : number & (~mask);
    };

    var goDecimal = function() {
        var inputStr = $("#txtDecimal").val();
        if (!inputStr.match(RegExp("^-?[0-9]+$"))) {
            alert("Please enter an integer in decimal, without leading zeros.");
            return;
        }
        var inputNum = parseInt(inputStr);
        if (inputNum <= 0) {
            alert("Please enter a positive integer.");
            return;
        }
        myNumber = inputNum;
        $("#txtBinary").val(toBinary(inputNum).join(""));
    };
    goDecimal();

    $("#btnGoDecimal").click(goDecimal);

    $("#btnGoBinary").click(function() {
        var inputStr = $("#txtBinary").val();
        if (!inputStr.match(RegExp("^[01]+$"))) {
            alert("Please enter an integer in binary, without separators.");
            return;
        }
        var bitArray = [];
        for (var i = 0; i < inputStr.length; ++i) {
            bitArray.push(inputStr[i] == 1 ? 1 : 0);
        }
        myNumber = toDecimal(bitArray);
        $("#txtDecimal").val(myNumber);
    });

    $("#btnGet").click(function() {
        var idx = parseInt($("#numBit").val());
        $("#pResult").html("Bit is " + (getBit(myNumber, idx) ? "on" : "off"));
    });

    $("#btnSet0").click(function() {
        var idx = parseInt($("#numBit").val());
        myNumber = setBit(myNumber, idx, 0);
        $("#txtDecimal").val(myNumber);
        $("#txtBinary").val(toBinary(myNumber).join(""));
        $("#pResult").html("");
    });

    $("#btnSet1").click(function() {
        var idx = parseInt($("#numBit").val());
        myNumber = setBit(myNumber, idx, 1);
        $("#txtDecimal").val(myNumber);
        $("#txtBinary").val(toBinary(myNumber).join(""));
        $("#pResult").html("");
    });
}

## fiddle.manifest
name: Bit twiddling
description: Some description, please keep it in one line
authors:
  - Michael Penkov
normalize_css: no