Hackerrank | 10 Days of Javascript | Day 9-Solution in JS | Binary-Calculator-Hackerrank-Solution-in-JS

Manas 23:34

Hackerrank | 10 Days of Javascript | Day 9-Solution in JS | Binary-Calculator-Hackerrank-Solution-in-JS

Hackerrank Solution 10-Days-of-JavaScript
Day 9: Binary Calculator Solution

Objective

In this challenge, we implement a calculator that uses binary numbers. Check out the attached tutorial for learning materials.

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, , , and .

The calculator's initial state must look like this:

image

  • Element IDs. Each element in the document must have an id, specified below:

    innerHTMLidDescription/Behavior
    resContains the result of button presses.
    btnsA button container that displays all eight calculator buttons.
    0btn0A button expressing binary digit .
    1btn1A button expressing binary digit .
    CbtnClrA button to clear the contents of .
    =btnEqlA button to evaluate the contents of the expression in .
    +btnSumA button for the addition operation.
    -btnSubA button for the subtraction operation.
    *btnMulA button for the multiplication operation.
    /btnDivA button for the integer division operation.

  • 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 , where  is the first binary number,  is the second binary number, and  is in the set .
  • Both operands will always be positive integers when converted from base- to base-.
  • All expressions will be valid.

Explanation

Consider the following sequence of button clicks:

Before pressing the  button, the result div looks like this:

27+8

After pressing the  button to evaluate our expression, the result div looks like this:

27+8eval

Notice that , , and , so our calculator evaluated the expression correctly.

Now, let's consider our next sequence of button clicks as:

Before pressing the  button, the result div looks like this:

141x7

After pressing the  button to evaluate our expression, the result div looks like this:

141x7eval

Consider the next sequence of button clicks as:

The result div looks like this:

clear3


https://www.hackerrank.com/challenges/js10-binary-calculator/problem
Day 9: Binary Calculator Solution in JS 
binaryCalculator.css



  body {
  width: 33%;
}

#res {
  display: block;
  font-size: 20px;
  height: 48px;
  background-color: lightgray;
  border: 2px solid black;
  box-sizing: border-box;
}

#btns {
  display: block;
  overflow: hidden;
}

#btns button {
  display: block;
  float: left;
  width: 25%;
  height: 36px;
  font-size: 18px;
  background: black;
  color: red;
}

#btns #btn0,
#btns #btn1 {
  background-color: lightgreen;
  color: brown;
}

#btns #btnClr,
#btns #btnEql {
  background-color: darkgreen;
  color: white;
}



binaryCalculator.js


  window.onload = () => {
  let inputs = [];
  let operator = '';

  const displayRes = () => {
    const res = document.getElementById('res');

    let val1 = inputs[0];
    let val2 = inputs[1] === undefined ? '' : inputs[1];

    res.innerText = `${val1}${operator}${val2}`;
  };

  const setOperator = op => {
    if (inputs[1] === undefined) {
      operator = op;
    }

    displayRes();
  };

  const setValues = num => {
    if (inputs.length === 0) {
      inputs[0] = num;
    } else if (inputs.length === 1 && operator.length === 0) {
      inputs[0] += num;
    } else if (inputs.length === 1 && operator.length > 0) {
      inputs[1] = num;
    } else if (inputs.length === 2 && operator.length > 0) {
      inputs[1] += num;
    }

    displayRes();
  };

  const btn0 = document.getElementById('btn0');
  btn0.addEventListener('click', () => {
    setValues('0');
  });

  const btn1 = document.getElementById('btn1');
  btn1.addEventListener('click', () => {
    setValues('1');
  });

  const btnSum = document.getElementById('btnSum');
  btnSum.addEventListener('click', () => {
    setOperator('+');
  });

  const btnSub = document.getElementById('btnSub');
  btnSub.addEventListener('click', () => {
    setOperator('-');
  });

  const btnMul = document.getElementById('btnMul');
  btnMul.addEventListener('click', () => {
    setOperator('*');
  });

  const btnDiv = document.getElementById('btnDiv');
  btnDiv.addEventListener('click', () => {
    setOperator('/');
  });

  const btnClr = document.getElementById('btnClr');
  btnClr.addEventListener('click', () => {
    inputs = [''];
    operator = '';
    displayRes();
  });

  const btnEql = document.getElementById('btnEql');
  btnEql.addEventListener('click', () => {
    if (inputs.length === 2 && operator.length > 0) {
      let a = parseInt(inputs[0], 2);
      let b = parseInt(inputs[1], 2);

      switch (operator) {
        case '+':
          inputs = [(a + b).toString(2)];
          break;
        case '-':
          inputs = [(a - b).toString(2)];
          break;
        case '*':
          inputs = [parseInt(a * b, 0).toString(2)];
          break;
        case '/':
          inputs = [parseInt(a / b, 0).toString(2)];
          break;
      }

      operator = '';

      displayRes();
    }
  });
};




index.html



<html lang="en">
  <head>
    <meta charset="UTF-8"></meta>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
    <meta content="ie=edge" http-equiv="X-UA-Compatible"></meta>
    <link href="css/binaryCalculator.css" rel="stylesheet" type="text/css"></link>
    <title>Day 9: Binary Calculator</title>
  </head>
  <body>
    <div id="res">

    <div id="btns">
      <button id="btn0">0</button>
Tags
Reactions

Post a Comment

0 Comments