🌟

電卓（JavaScript）

2023/06/29に公開

html、CSS、JavaScriptを使用して電卓を作成してみました。@gist

作成コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="calculator">
    <title>電卓</title>
</head>

<style>
//数字の枠
    button {
        width: 70px;
        height: 70px;
        font-size: 36px;
        background-color: white;
        border: 1px solid darkgrey;
        border-radius: 10px;
    }
    button:hover {
        background: #4D4E53;
    }
    button:active {
        background: aliceblue;
    }

　//打ち込んだ数字の表示場所
    .display {
        width: 210px;
        height: 50px;
        text-align: right;
        background: white;
        border-top: solid gainsboro 5px;
        border-bottom: solid gainsboro 5px;
        border-right: solid gainsboro 5px;
        border-left: solid gainsboro 5px;
        border-radius: 10px;
        font-size: 30px;
    }

//演算子
    .operator {
        background-color: skyblue;
    }
    .operator:hover {
        background: darkgray;
    }
    .operator:active {
        background: cornflowerblue;
    }

//「C」の消去
    .equal {
        background-color: darkgray;
    }
</style>

<body>
<input type="text" class="display" id="display" value="" disabled>
<button class="equal" onclick="erase('')" >C</button>
<div>
    <button onclick="symbol('7')">7</button>
    <button onclick="symbol('8')">8</button>
    <button onclick="symbol('9')">9</button>
    <button class="operator" onclick="symbol('/')">÷</button>
</div>
<div>
    <button onclick="symbol( '4' )">4</button>
    <button onclick="symbol( '5' )">5</button>
    <button onclick="symbol( '6' )">6</button>
    <button class="operator" onclick="symbol('*')">×</button>
</div>
<div>
    <button onclick="symbol('1')" >1</button>
    <button onclick="symbol('2')" >2</button>
    <button onclick="symbol('3')" >3</button>
    <button class="operator" onclick="symbol('-')">-</button>
</div>
<div>
    <button onclick="symbol('0')">0</button>
    <button onclick="symbol('.')" >.</button>
    <button class="operator" onclick="symbol('+')">+</button>
    <button class="operator" onclick="calculation()">=</button>
</div>
<script>
//<input>の数字を消す
    function erase(num) {
        document.querySelector('input').value = num
    }

//<input>に打ち込み文字を表示
    function symbol(num){
        document.querySelector('input').value += num
    }

//<input>に表示されている文字に意味を持たせて計算
   function calculation() {
        const num = document.querySelector('input').value;
        let total = new Function('return ' + num);
        erase(total().toString());
    }
</script>
</body>
</html>

難しかったこと

<script>の中にあるconst total = new Function('return ' + num)

こちらは本来、const total = new Function('return ' + num)ですが、
ずっとconst total = new Function('return' + num)と入力していました。

「const total = new Function('return' + num)」のエラー内容

何が違うかわかりますか？
答えはreturnの後に空白があるかないか。
空白を入れないで６×６を入力をすると「return6*6」になり、関数がないと表示されてしまいます。
それに気づかず、erase(total().toString())の前後に何か入るのか悩み、
２日ほど探していました。皆様もお気をつけ下さい。

作成をしてみて思ったこと

JavaScriptの理解が足りていない。実際に作成することで、何を使用したら良いのか調べるのでより理解し、実用的に書けた気がした。
コードの書き方を変更した時、前回何を書いていたのか再確認ができないので、GitHubなど過去に書いたコードを見返せるプラットフォームを利用する大切さを知った。
３日ぐらいCSSのデザインをどの様に作成するかに時間を使ってしまった。JavaScriptを使用して動かすことが大切なので、始めは簡易的なデザインにし、動いてからこだわってデザインを作成すればよかった。

作成コード

難しかったこと

作成をしてみて思ったこと

Discussion