{"id":1369,"date":"2021-05-19T15:47:30","date_gmt":"2021-05-19T10:17:30","guid":{"rendered":"https:\/\/www.codingbroz.com\/?p=1369"},"modified":"2022-08-27T23:54:43","modified_gmt":"2022-08-27T18:24:43","slug":"day-9-binary-operators-javascript-solution","status":"publish","type":"post","link":"https:\/\/www.codingbroz.com\/day-9-binary-operators-javascript-solution\/","title":{"rendered":"Day 9: Binary Calculator | 10 Days Of JavaScript | HackerRank Solution"},"content":{"rendered":"\n<p>Hello coders, today we are going to solve <strong>Day 9: Binary Calculator HackerRank Solution<\/strong> which is a part of <strong>10 Days of JavaScript<\/strong> Series.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/www.codingbroz.com\/wp-content\/uploads\/2021\/05\/day-90-binary-calculator-10-days-of-javascript-codingbroz.png\" alt=\"Day 9: Binary Calculator\" class=\"wp-image-3424\" srcset=\"https:\/\/www.codingbroz.com\/wp-content\/uploads\/2021\/05\/day-90-binary-calculator-10-days-of-javascript-codingbroz.png 1200w, https:\/\/www.codingbroz.com\/wp-content\/uploads\/2021\/05\/day-90-binary-calculator-10-days-of-javascript-codingbroz-768x432.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_65 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<label for=\"ez-toc-cssicon-toggle-item-662d242e3308c\" class=\"ez-toc-cssicon-toggle-label\"><label class=\"ez-toc-title\">Table of Contents<\/label>\n<span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #0090ff;color:#0090ff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #0090ff;color:#0090ff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-662d242e3308c\" checked \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.codingbroz.com\/day-9-binary-operators-javascript-solution\/#Objective\" title=\"Objective\">Objective<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.codingbroz.com\/day-9-binary-operators-javascript-solution\/#Task\" title=\"Task\">Task<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.codingbroz.com\/day-9-binary-operators-javascript-solution\/#Constraints\" title=\"Constraints\">Constraints<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.codingbroz.com\/day-9-binary-operators-javascript-solution\/#Solution_%E2%80%93_Day_9_Binary_Calculator\" title=\"Solution &#8211; Day 9: Binary Calculator\">Solution &#8211; Day 9: Binary Calculator<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Objective\"><\/span><strong>Objective<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In this challenge, we implement a calculator that uses binary numbers.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Task\"><\/span><strong>Task<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Implement a simple calculator that performs the following operations on&nbsp;<em>binary numbers<\/em>: addition, subtraction, multiplication, and division. Note that division operation must be&nbsp;<em>integer division<\/em>&nbsp;only; for example,&nbsp;<strong>1001 \/ 100 = 10<\/strong>,&nbsp;<strong>1110\/101 = 10<\/strong>, and&nbsp;<strong>101\/1 = 101<\/strong>.<\/p>\n\n\n\n<ul><li><em>Styling.<\/em>&nbsp;The document&#8217;s elements must have the following styles:<ul><li><code>body<\/code>&nbsp;has a&nbsp;<code>width<\/code>&nbsp;of&nbsp;<code>33%<\/code>.<\/li><li><code>res<\/code>&nbsp;has a&nbsp;<code>background-color<\/code>&nbsp;of&nbsp;<code>lightgray<\/code>, a&nbsp;<code>border<\/code>&nbsp;that is&nbsp;<code>solid<\/code>, a&nbsp;<code>height<\/code>&nbsp;of&nbsp;<code>48px<\/code>, and a&nbsp;<code>font-size<\/code>&nbsp;of&nbsp;<code>20px<\/code>.<\/li><li><code>btn0<\/code>&nbsp;and&nbsp;<code>btn1<\/code>&nbsp;have a&nbsp;<code>background-color<\/code>&nbsp;of&nbsp;<code>lightgreen<\/code>&nbsp;and a&nbsp;<code>color<\/code>&nbsp;of&nbsp;<code>brown<\/code>.<\/li><li><code>btnClr<\/code>&nbsp;and&nbsp;<code>btnEql<\/code>&nbsp;have a&nbsp;<code>background-color<\/code>&nbsp;of&nbsp;<code>darkgreen<\/code>&nbsp;and a&nbsp;<code>color<\/code>&nbsp;of&nbsp;<code>white<\/code>.<\/li><li><code>btnSum<\/code>,&nbsp;<code>btnSub<\/code>,&nbsp;<code>btnMul<\/code>, and&nbsp;<code>btnDiv<\/code>&nbsp;have a&nbsp;<code>background-color<\/code>&nbsp;of&nbsp;<code>black<\/code>, a&nbsp;<code>color<\/code>&nbsp;of&nbsp;<code>red<\/code>.<\/li><li>All the buttons in&nbsp;<code>btns<\/code>&nbsp;have a&nbsp;<code>width<\/code>&nbsp;of&nbsp;<code>25%<\/code>, a&nbsp;<code>height<\/code>&nbsp;of&nbsp;<code>36px<\/code>, a&nbsp;<code>font-size<\/code>&nbsp;of&nbsp;<code>18px<\/code>,&nbsp;<code>margin<\/code>&nbsp;of&nbsp;<code>0px<\/code>, and&nbsp;<code>float<\/code>&nbsp;value&nbsp;<code>left<\/code>.<\/li><\/ul><\/li><\/ul>\n\n\n\n<p>The&nbsp;<code>.js<\/code>&nbsp;and&nbsp;<code>.css<\/code>&nbsp;files are in different directories, so use the&nbsp;<em>link<\/em>&nbsp;tag to provide the CSS file path and the&nbsp;<em>script<\/em>&nbsp;tag to provide the JS file path:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;link rel=\"stylesheet\" href=\"css\/binaryCalculator.css\" type=\"text\/css\"&gt;\n    &lt;\/head&gt;\n    \n    &lt;body&gt;\n    \t&lt;script src=\"js\/binaryCalculator.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Constraints\"><\/span><strong>Constraints<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul><li>All expressions in the test dataset are entered in the form&nbsp;<strong>operand = operator = operand2<\/strong>, where&nbsp;<strong><em>operand1<\/em><\/strong>&nbsp;is the first binary number,&nbsp;<strong><em>operand2<\/em><\/strong>&nbsp;is the second binary number, and&nbsp;<strong><em>operator<\/em><\/strong>&nbsp;is in the set&nbsp;.<\/li><li>Both operands will always be positive integers when converted from base-<strong>2<\/strong>&nbsp;to base-<strong>10<\/strong>.<\/li><li>All expressions will be valid.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Solution_%E2%80%93_Day_9_Binary_Calculator\"><\/span><strong>Solution &#8211; Day 9: Binary Calculator<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>binaryCalculator.css<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"> body\n{\n    width: 33%;\n}\n#btn0,#btn1\n{\n    background-color: lightgreen;\n    color: brown;\n}\n\n#btnClr,#btnEql\n{\n    background-color: darkgreen;\n    color: white;\n}\n\n#btnSum,#btnSub,#btnMul,#btnDiv\n{\nbackground-color: black;\ncolor: red;\n}\n\nbutton\n{\n    width :25%;\n    height :36px;\n    font-size :18px; \n    margin :0px;\n    float :left\n}\n\n#res {\n    background-color: lightgray;\n    border: solid;\n    height: 48px;\n    font-size: 20px;\n}<\/pre>\n\n\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-5246141430412355\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block; text-align:center;\"\n     data-ad-layout=\"in-article\"\n     data-ad-format=\"fluid\"\n     data-ad-client=\"ca-pub-5246141430412355\"\n     data-ad-slot=\"8798433565\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<p><strong>index.html<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!-- Enter your HTML code here -->\n&lt;!DOCTYPE html>\n&lt;html>\n    &lt;head>\n        &lt;meta charset=\"utf-8\">\n        &lt;title>Binary Calculator&lt;\/title>\n        &lt;link rel=\"stylesheet\" href=\"css\/binaryCalculator.css\" type=\"text\/css\">\n    &lt;\/head>\n    &lt;body>\n        &lt;div id=\"res\">\n&lt;\/div>\n&lt;br>\n        &lt;div id=\"btns\" class=\"btns\">\n        &lt;button id=\"btn0\" class=\"dgt\">0&lt;\/button>\n        &lt;button id=\"btn1\">1&lt;\/button>\n        &lt;button id=\"btnClr\">C&lt;\/button>\n        &lt;button id=\"btnEql\">=&lt;\/button>\n        \n        &lt;br>\n        \n        &lt;button id=\"btnSum\">+&lt;\/button>\n        &lt;button id=\"btnSub\">-&lt;\/button>\n        &lt;button id=\"btnMul\">*&lt;\/button>\n        &lt;button id=\"btnDiv\">\/&lt;\/button>\n        &lt;\/div>\n&lt;script src=\"js\/binaryCalculator.js\" type=\"text\/javascript\">&lt;\/script>\n    &lt;\/body>\n&lt;\/html>\n\n<\/pre>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-5246141430412355\" data-ad-slot=\"8798433565\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<p><strong>binaryCalculator.js<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">    btnClr.onclick = function() {\n    res.innerHTML = \"\";\n}\n\nbtnEql.onclick = function() {\n    let s = res.innerHTML;\n    s = Math.floor(eval(s.replace(\/([01]+)\/g, '0b$1'))).toString(2);\n    res.innerHTML = s;\n}\n\nbtn0.onclick = function() {\n    res.innerHTML += \"0\";\n}\nbtn1.onclick = function() {\n    res.innerHTML += \"1\";\n}\nbtnSum.onclick = function() {\n    res.innerHTML += \"+\";\n}\nbtnSub.onclick = function() {\n    res.innerHTML += \"-\";\n}\nbtnMul.onclick = function() {\n    res.innerHTML += \"*\";\n}\nbtnDiv.onclick = function() {\n    res.innerHTML += \"\/\";\n}<\/pre>\n\n\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-5246141430412355\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block; text-align:center;\"\n     data-ad-layout=\"in-article\"\n     data-ad-format=\"fluid\"\n     data-ad-client=\"ca-pub-5246141430412355\"\n     data-ad-slot=\"8798433565\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<p><strong>Disclaimer:<\/strong> The above Problem <strong>(<a href=\"https:\/\/www.hackerrank.com\/challenges\/js10-binary-calculator?hr_b=1\" target=\"_blank\" aria-label=\"Binary Calculator (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"rank-math-link\">Binary Calculator<\/a>)<\/strong> is generated by <strong>Hacker Rank<\/strong> but the Solution is provided by <strong>CodingBroz<\/strong>. This tutorial is only for <strong>Educational<\/strong> and <strong>Learning<\/strong> Purpose.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hello coders, today we are going to solve Day 9: Binary Calculator HackerRank Solution which is a part of 10 Days of JavaScript Series.<\/p>\n","protected":false},"author":1,"featured_media":3424,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9,150],"tags":[151,80,155,18],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/www.codingbroz.com\/wp-content\/uploads\/2021\/05\/day-90-binary-calculator-10-days-of-javascript-codingbroz.png","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/www.codingbroz.com\/wp-json\/wp\/v2\/posts\/1369"}],"collection":[{"href":"https:\/\/www.codingbroz.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codingbroz.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codingbroz.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codingbroz.com\/wp-json\/wp\/v2\/comments?post=1369"}],"version-history":[{"count":6,"href":"https:\/\/www.codingbroz.com\/wp-json\/wp\/v2\/posts\/1369\/revisions"}],"predecessor-version":[{"id":7626,"href":"https:\/\/www.codingbroz.com\/wp-json\/wp\/v2\/posts\/1369\/revisions\/7626"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codingbroz.com\/wp-json\/wp\/v2\/media\/3424"}],"wp:attachment":[{"href":"https:\/\/www.codingbroz.com\/wp-json\/wp\/v2\/media?parent=1369"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codingbroz.com\/wp-json\/wp\/v2\/categories?post=1369"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codingbroz.com\/wp-json\/wp\/v2\/tags?post=1369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}