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:
bodyhas awidthof33%.reshas abackground-coloroflightgray, aborderthat issolid, aheightof48px, and afont-sizeof20px.btn0andbtn1have abackground-coloroflightgreenand acolorofbrown.btnClrandbtnEqlhave abackground-colorofdarkgreenand acolorofwhite.btnSum,btnSub,btnMul, andbtnDivhave abackground-colorofblack, acolorofred.- All the buttons in
btnshave awidthof25%, aheightof36px, afont-sizeof18px,marginof0px, andfloatvalueleft.
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.