Hex to RGBA

by charlescarver

HTML

#<input class="hex" value="" maxlength="6" size="6" />
<input class="alpha_a" value="" maxlength="1" size="1" />.
<input class="alpha_b" value="" maxlength="1" size="1"/>
<br /><br />
<input type="submit" class="submit" />

<br /><br />
<div class="result"></div>

JavaScript

function hex2rgb(hex) {
    if (hex.length != 3 && hex.length != 6) {
        $(".result").text("Error");
        $(".result").css("border-bottom", "0");
    } else {
        if (hex.length == 3) {
            var temp = hex;
            hex = '';
            temp = /^([a-f0-9])([a-f0-9])([a-f0-9])$/i.exec(temp).slice(1);
            for (var i = 0; i < 3; i++) hex += temp[i] + temp[i];
        }
        var triplets = /^([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/i.exec(hex).slice(1);
        return {
            red: parseInt(triplets[0], 16),
            green: parseInt(triplets[1], 16),
            blue: parseInt(triplets[2], 16)
        }
    }
}
$(".submit").click(function() {
    var keywords = ["yolo", "bieber", "justin bieber", "bieber fever", "swag", "swaq", "cole"];
    var cole = "cole";
    if (keywords.indexOf($("input").val().toLowerCase()) != -1) {
        $(".result").css("border-bottom", "0");
        if ($('.hex').val().toLowerCase() != cole) {
            $(".result").text("This isn't Twitter, Brickhouse.");
        } else {
            $(".result").text("Du ficken ihn!");
        }
    } else {
        var hex = $(".hex").val();
        var alphaa = $(".alpha_a").val();
        var alphab = $(".alpha_b").val();
        if (alphaa.length === 0) {
            var alphaa = "1";
        }
        if (alphab.length === 0) {
            var alphab = "0";
        }
        var rgb = hex2rgb(hex);
        if (rgb) { // converted successfully
            var converted = "rgba(" + rgb.red + "," + rgb.green + "," + rgb.blue + "," + alphaa + "." + alphab + ")"
            $(".result").text(converted);
            $(".result").css({
                "border-bottom": "20px solid " + converted,
            });
        }
    }
});