Day 9: Binary Calculator in JavaScript | 10 Days Of JavaScript

Hello coders, today we are going to solve Day 9: Binary Calculator Hacker Rank Solution in JavaScript which is a Part of 10 Days Of JavaScript Series.

Hello coders, today we are going to solve Day 9: Binary Calculator Hacker Rank Solution in JavaScript which is a Part of 10 Days Of JavaScript Series.

Day 9: Binary Calculator in JavaScript
Table Of Contents 👊

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

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.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;
}

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 Sloth Coders. This tutorial is only for Educational and Learning Purpose.

Sloth Coders is a Learning Platform for Coders, Programmers and Developers to learn from the basics to advance of Coding of different langauges(python, Java, Javascript and many more).

Post a Comment