(15)HackerRank-Day 9: Binary Calculator(javaScript Answer)

第 11 屆 iThome 鐵人賽

DAY 14

Software Development

用JS來刷刷HackerRank系列第 14 篇

11th鐵人賽

theRookie

2019-10-01 08:54:03

680 瀏覽

終於來到JS最後一篇啦
第九天，按理說應該要集大成
但好像也蠻簡單的

題目
Day 9: Binary Calculator

解析
這題就是位元計算機
JS還不錯，對於位元運算都有他簡單的表達方式
我們只要注意型態不要用錯，變成字串串接就可以了
這次程式裡面也會有註解

  window.onload = () => {
    let inputs = [];
    let operator = "";
    //判斷顯示運算式
    const displayRes = () => {
        const res = document.getElementById("res");
        let val1 = inputs[0];
        let val2 = inputs[1] || '';
        res.innerText = `${val1}${operator}${val2}`
    }
    //塞入兩個運算元
    const setValue = (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 setOperator = op => {
        if (inputs[1] == undefined) {
            operator = op
        }
        displayRes()
    }




    let btn0 = document.getElementById("btn0");
    btn0.addEventListener('click', () => {
        setValue('0')
    })

    let btn1 = document.getElementById("btn1");
    btn1.addEventListener('click', () => {
        setValue('1')
    })
    let btnSum = document.getElementById("btnSum");
    btnSum.addEventListener('click', () => {
        setOperator("+")

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

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

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

    })
    let btnClr = document.getElementById("btnClr");
    btnClr.addEventListener('click', () => {
        inputs = [''];
        operator = '';
        displayRes();
    })
    //按下等於後
    let btnEql = document.getElementById("btnEql");
    btnEql.addEventListener('click', () => {
        if (operator != '' && inputs.length == 2) {
            let [a, b] = [parseInt(inputs[0], 2), 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).toString(2)];
                    break;
                case '/':
                    inputs = [parseInt(a / b).toString(2)];
                    break;
            }
            operator = '';
            displayRes();
        }


    })
}

body {
    width: 33%;
}

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

#btns 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
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/binaryCalculator.css" type="text/css">
        <title>Binary Calculator</title>
    </head>
    <body>
        <div id="res"></div>
        <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>
        <script src="js/binaryCalculator.js" type="text/javascript"></script>
    </body>
</html>