> For the complete documentation index, see [llms.txt](https://kkishan114.gitbook.io/10-days-of-javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kkishan114.gitbook.io/10-days-of-javascript/index/day-9-binary-calculator.md).
# Day 9: Binary Calculator
### Problem Link
* [x] [**HackerRank Problem Link**](https://www.hackerrank.com/challenges/js10-binary-calculator)
### Solution
* [x] **HTML + CSS + JS Solution**
{% code title="binaryCal.css" %}
```css
body {
width: 33%;
}
#res {
background-color: light-gray;
border: solid;
height: 48px;
font-size: 20px;
}
button {
width: 25%;
height: 36px;
font-size: 18px;
margin: 0px;
float: left;
}
#btn0, #btn1 {
background-color: lightgreen;
color: brown;
}
#btnClr, #btnEql {
background-color: darkgreen;
color: white;
}
#btnSum, #btnSub, #btnMul, #btnDiv {
background-color: black;
color: red;
}
```
{% endcode %}
{% code title="binaryCal.js" %}
```javascript
const ids = [1, 2, 3, 6, 9, 8, 7, 4]; // start position ids in clockwise order
let nums = [1, 2, 3, 6, 9, 8, 7, 4]; // rotate in clockwise order
let btn5 = document.getElementById("btn5");
btn5.onclick = function() {
nums.unshift(nums.pop());
for (i = 0; i <= 7; i++) {
document.getElementById("btn" + ids[i]).innerHTML = nums[i];
}
};
```
{% endcode %}
{% code title="binaryCal.html" %}
```markup
Binary Calculator
```
{% endcode %}