# Day 9: Binary Calculator (10 Days of Javascript)

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;

The calculator’s initial state must look like this:

• 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>``````

Solution:

HTML:

``````<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Buttons</title>
<body>
<div id="res"></div>
<div id="btns">
<button id="btnClr" class="btn" onclick="clearresult()">C</button>
<button id="btnEql" class="btn" onclick="equal()">=</button>
<button id="btnSum" class="btn" onclick="assignOperator('+')">+</button>
<button id="btnSub" class="btn" onclick="assignOperator('-')">-</button>
<button id="btnMul" class="btn" onclick="assignOperator('*')">*</button>
<button id="btnDiv" class="btn" onclick="assignOperator('/')">/</button>
</div>
<script src="js/binaryCalculator.js" type="text/javascript"></script>     </body>
</html>``````

CSS:

``````body {
width: 33%;
}
#res {
background-color: lightgray;
border:solid;
height:48px;
font-size:20px;
}
#btn0, #btn1 {
background-color: lightgreen;
color:brown;
}
#btnClr, #btnEql {
background-color: lightgreen;
color:white;
}
#btnSum, #btnSub, #btnMul, #btnDiv {
background-color:black;
color:red;
} .btn {
width: 25%;
height: 36px;
font-size: 18px;
margin: 0px;
float: left;
}``````

JAVASCRIPT:

``````const res = document.getElementById("res");
let operand1 = operator = operand2 = '';
if(operator) {
operand2 += value;
} else {
operand1 += value;
}
renderResult();
}
function clearresult() {
operand1 = operator = operand2 = '';
renderResult();
}
function equal() {
operand1 = parseInt(operand1, 2);
operand2 = parseInt(operand2, 2);
switch(operator) {
case '+':
operand1 += operand2;
break;
case '-':
operand1 -= operand2;
break;
case '*':
operand1 *= operand2;
break;
case '/':
if(operand2)
operand1 /= operand2;
break;
default:
break;
}
operand1 = parseInt(operand1).toString(2);
operator = operand2 = '';
renderResult();
}
function assignOperator(value) {
operator = value;
renderResult();
}
function renderResult() {
res.innerHTML = operand1 + operator + operand2;
}  ``````