Day 9: Binary Calculator

Last updated 3 years ago

Was this helpful?

Day 9: Binary Calculator

Problem Link

Solution

HTML + CSS + JS Solution

binaryCal.css

body {
    width: 33%;
}

#res {
    background-color: light-gray;
    border: solid;
    height: 48px;
    font-size: 20px;
}

button {
    width: 25%;
    height: 36px;
    font-size: 18px;
    margin: 0px;
    float: left;
}

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

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

#btnSum, #btnSub, #btnMul, #btnDiv {
    background-color: black;
    color: red;
}

binaryCal.js

const ids = [1, 2, 3, 6, 9, 8, 7, 4]; // start position ids in clockwise order
let nums = [1, 2, 3, 6, 9, 8, 7, 4]; // rotate in clockwise order
let btn5 = document.getElementById("btn5");

btn5.onclick = function() {
    nums.unshift(nums.pop());
    for (i = 0; i <= 7; i++) {
        document.getElementById("btn" + ids[i]).innerHTML = nums[i];
    }
};

binaryCal.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/binaryCalculator.css" type="text/css">
        <title>Binary Calculator</title>
        <input id="res"></input>
        <div id="btns">
            <button id="btn0">0</button>
            <button id="btn1">1</button>
            <button id="btnClr">C</button>
            <button id="btnEql">=</button>
            <button id="btnSum">+</button>
            <button id="btnSub">-</button>
            <button id="btnMul">*</button>
            <button id="btnDiv">/</button>
        </div>
    </head>
    <body>
        <script src="js/binaryCalculator.js" type="text/javascript"></script>
    </body>
</html>

PreviousDay 8: Buttons Container

Last updated 3 years ago

Was this helpful?