mpenkov/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
	<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>
	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("");
	});
	}
	name: Bit twiddling
	description: Some description, please keep it in one line
	authors:
	- Michael Penkov
	normalize_css: no