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.
Task
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 = 10, 1110/101 = 10, and 101/1 = 101.
- Styling. The document’s elements must have the following styles:
body
has awidth
of33%
.res
has abackground-color
oflightgray
, aborder
that issolid
, aheight
of48px
, and afont-size
of20px
.btn0
andbtn1
have abackground-color
oflightgreen
and acolor
ofbrown
.btnClr
andbtnEql
have abackground-color
ofdarkgreen
and acolor
ofwhite
.btnSum
,btnSub
,btnMul
, andbtnDiv
have abackground-color
ofblack
, acolor
ofred
.- All the buttons in
btns
have awidth
of25%
, aheight
of36px
, afont-size
of18px
,margin
of0px
, andfloat
valueleft
.
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> <head> <link rel="stylesheet" href="css/binaryCalculator.css" type="text/css"> </head> <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> <head> <meta charset="utf-8"> <title>Binary Calculator</title> <link rel="stylesheet" href="css/binaryCalculator.css" type="text/css"> </head> <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.