In this HackerRank Day 9: Binary Calculator 10 Days of javascript problem Implement a simple calculator that performs the following operations on binary numbers: addition, subtraction, multiplication, and division.


HackerRank Day 9: Binary Calculator 10 Days of javascript solution


HackerRank Day 9: Binary calculator 10 days of javascript problem solution.

JavaScript File

var opr = "";


var screen = document.getElementById("res");

screen.innerHTML = "";


function buttonClicked(e) {

    console.log(e)

    var btn = e.target || e.srcElement;

    

    if (btn.id != "btnClr" && btn.id != "btnEql") {

        screen.innerHTML += btn.innerHTML;

        

        if (btn.id != "btn0" && btn.id != "btn1") {

            opr = btn.innerHTML;

        }

    } else if (btn.id == "btnEql") {

        var str = screen.innerHTML.split(opr);

        var op1 = str[0];

        var op2 = str[1];

        

        /* The double bitwise NOT ('~~') is a shortcut for Math.floor() */

        screen.innerHTML = (~~eval(parseInt(op1, 2) + opr + parseInt(op2, 2))).toString(2);

        

        opr = "";

    } else if (btn.id == "btnClr") {

        screen.innerHTML = "";

        opr = "";

    }

}


CSS File

#res {

    width: 81%;

    height: 48px;

    font-size: 20px;

    background: #d3d3d3;

    border: solid;

}


.btnContainer {

    width: 90%;

}

.btnContainer > .btnStyle1, .btnStyle2, .btnStyle3 {

    width: 22%;

    height: 36px;

    font-size: 18px;

}

.btnContainer > .btnStyle1 {

    background: lightgreen;

    color: brown;

}

.btnContainer > .btnStyle2 {

    background: darkgreen;

    color: white;

}

.btnContainer > .btnStyle3 {

    background: black;

    color: red;

}