# Day 9: Binary Calculator | 10 Days Of JavaScript | HackerRank Solution

Hello coders, today we are going to solve Day 9: Binary Calculator HackerRank Solution which is a part of 10 Days of JavaScript Series.

## Objective

In this challenge, we implement a calculator that uses binary numbers.

Implement a simple calculator that performs the following operations on binary numbers: addition, subtraction, multiplication, and division. Note that division operation must be integer division only; for example, 1001 / 100 = 101110/101 = 10, and 101/1 = 101.

• Styling. The document’s elements must have the following styles:
• `body` has a `width` of `33%`.
• `res` has a `background-color` of `lightgray`, a `border` that is `solid`, a `height` of `48px`, and a `font-size` of `20px`.
• `btn0` and `btn1` have a `background-color` of `lightgreen` and a `color` of `brown`.
• `btnClr` and `btnEql` have a `background-color` of `darkgreen` and a `color` of `white`.
• `btnSum``btnSub``btnMul`, and `btnDiv` have a `background-color` of `black`, a `color` of `red`.
• All the buttons in `btns` have a `width` of `25%`, a `height` of `36px`, a `font-size` of `18px``margin` of `0px`, and `float` value `left`.

The `.js` and `.css` files are in different directories, so use the link tag to provide the CSS file path and the script tag to provide the JS file path:

```<!DOCTYPE html>
<html>

<body>
<script src="js/binaryCalculator.js" type="text/javascript"></script>
</body>
</html>```

## Constraints

• All expressions in the test dataset are entered in the form operand = operator = operand2, where operand1 is the first binary number, operand2 is the second binary number, and operator is in the set .
• Both operands will always be positive integers when converted from base-2 to base-10.
• All expressions will be valid.

## Solution – Day 9: Binary Calculator

binaryCalculator.css

``` body
{
width: 33%;
}
#btn0,#btn1
{
background-color: lightgreen;
color: brown;
}

#btnClr,#btnEql
{
background-color: darkgreen;
color: white;
}

#btnSum,#btnSub,#btnMul,#btnDiv
{
background-color: black;
color: red;
}

button
{
width :25%;
height :36px;
font-size :18px;
margin :0px;
float :left
}

#res {
background-color: lightgray;
border: solid;
height: 48px;
font-size: 20px;
}```

index.html

```<!-- Enter your HTML code here -->
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Binary Calculator</title>
<body>
<div id="res">
</div>
<br>
<div id="btns" class="btns">
<button id="btn0" class="dgt">0</button>
<button id="btn1">1</button>
<button id="btnClr">C</button>
<button id="btnEql">=</button>

<br>

<button id="btnSum">+</button>
<button id="btnSub">-</button>
<button id="btnMul">*</button>
<button id="btnDiv">/</button>
</div>
<script src="js/binaryCalculator.js" type="text/javascript"></script>
</body>
</html>

```

binaryCalculator.js

```    btnClr.onclick = function() {
res.innerHTML = "";
}

btnEql.onclick = function() {
let s = res.innerHTML;
s = Math.floor(eval(s.replace(/([01]+)/g, '0b\$1'))).toString(2);
res.innerHTML = s;
}

btn0.onclick = function() {
res.innerHTML += "0";
}
btn1.onclick = function() {
res.innerHTML += "1";
}
btnSum.onclick = function() {
res.innerHTML += "+";
}
btnSub.onclick = function() {
res.innerHTML += "-";
}
btnMul.onclick = function() {
res.innerHTML += "*";
}
btnDiv.onclick = function() {
res.innerHTML += "/";
}```

Disclaimer: The above Problem (Binary Calculator) is generated by Hacker Rank but the Solution is provided by CodingBroz. This tutorial is only for Educational and Learning Purpose.