More than 1 year has passed since last update.

【３日目】電卓の見た目にこだわる

Last updated at 2022-04-07Posted at 2022-03-17

１．本日の課題

今日は前回までにできた電卓を普通の電卓のように近づけるためにHTMLとCSSを活用する。
レイアウトはCSSのFlexboxとgridをどちらとも調べて実装してみてという指定があった。

まずは前回のプログラムを修正し、Flexboxとgridを試してみる。

HTML

<html>
<head>
    <title>電卓</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <input class="formula" id="answer">
    <div class="container">
        <input type="button" class="item" value=1 onclick="inputNumber(1)">
        <input type="button" class="item" value=2 onclick="inputNumber(2)">
        <input type="button" class="item" value=3 onclick="inputNumber(3)">
    </div>
    <div class="container">
        <input type="button" class="item" value=4 onclick="inputNumber(4)">
        <input type="button" class="item" value=5 onclick="inputNumber(5)">
        <input type="button" class="item" value=6 onclick="inputNumber(6)">
    </div>
    <div class="container">
        <input type="button" class="item" value=7 onclick="inputNumber(7)">
        <input type="button" class="item" value=8 onclick="inputNumber(8)">
        <input type="button" class="item" value=9 onclick="inputNumber(9)">
    </div>
    <div class="container">
        <input type="button" class="item" value=0 onclick="inputNumber(0)">
        <input type="button" class="item" value=+ onclick="inputNumber('+')">
        <input type="button" class="item" value="=" onclick="result()">
    </div>
    <script>
        let answer = document.getElementById("answer");
        function inputNumber(num) {
            if (num == '+' || num == 0) {
                if (!isNaN(answer.value.slice(-1))) {
                    if (answer.value != '') {
                        answer.value = answer.value + num;
                    }
                }
            } else {
                answer.value = answer.value + num;
            }
        }
        function result() {
            answer.value = eval(answer.value);
        }
    </script>
</body>
</html>

CSS(Flexbox)

@charset "utf-8";
.formula {
    width: 300px;
    height: 50px;
    text-align: right;
    font-size: 150%;
}
.container {
    display: flex;
    gap: 5px;
    margin-bottom: 5px;
}
.item {
    background-color: #d3d3d3;
    width: 70px;
    height: 70px;
    font-size: 25px;
}

CSS(grid)

@charset "utf-8";
.formula {
    width: 300px;
    height: 50px;
    text-align: right;
    font-size: 150%;
}
.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
}
.item {
    background-color: #d3d3d3;
    height: 70px;
    font-size: 25px;
}

とりあえず両方とも調べて実装してみて仕組みを理解したので、マイナスやクリアなども増やしてより実際の電卓に近づけてみる。気を付ける点としては全体のバランスや普通の電卓のUIどおりに実装をすること。
ここからは先生からの指示でCodePenを使ってみることにした。

See the Pen formula by mizmizsan2 (@mizmizsan2) on CodePen.

まだ不安なので元のプログラムも張り付けておく。

<html>

<head>
    <title>電卓</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <input class="formula" id="answer">

    <div class="container">
        <input type="button" class="item" value=clear onclick="clearNumber()">
    </div>
    <div class="container">
        <input type="button" class="item" value=7 onclick="inputNumber(7)">
        <input type="button" class="item" value=8 onclick="inputNumber(8)">
        <input type="button" class="item" value=9 onclick="inputNumber(9)">
        <input type="button" class="item2" value=÷ onclick="inputNumber('/')">
    </div>
    <div class="container">
        <input type="button" class="item" value=4 onclick="inputNumber(4)">
        <input type="button" class="item" value=5 onclick="inputNumber(5)">
        <input type="button" class="item" value=6 onclick="inputNumber(6)">
        <input type="button" class="item2" value=× onclick="inputNumber('*')">

    </div>
    <div class="container">
        <input type="button" class="item" value=1 onclick="inputNumber(1)">
        <input type="button" class="item" value=2 onclick="inputNumber(2)">
        <input type="button" class="item" value=3 onclick="inputNumber(3)">
        <input type="button" class="item2" value=ー onclick="inputNumber('-')">
    </div>
    <div class="container">
        <input type="button" class="item" value=0 onclick="inputNumber(0)">
        <input type="button" class="item" value=. onclick="inputNumber('.')">
        <input type="button" class="item2" value="＝" onclick="result()">
        <input type="button" class="item2" value=＋ onclick="inputNumber('+')">
    </div>

    <script>
        var answer = document.getElementById("answer");

        function inputNumber(num) {
            if (num == '+' || num == '-' || num == '*' || num == '/' || num == 0) {
                if (!isNaN(answer.value.slice(-1))) {
                    if (answer.value != '') {
                        answer.value = answer.value + num;
                    }
                }
            } else {
                answer.value = answer.value + num;
            }
        }

        function result() {
            answer.value = eval(answer.value);
        }

        function clearNumber() {
            answer.value = "";
        }
    </script>
</body>

</html>

@charset "utf-8";
.formula {
    width: 280px;
    height: 50px;
    text-align: right;
    font-size: 150%;
}

.container {
    display: grid;
    grid-template-columns: 70px 70px 70px 70px;
    margin-bottom: 5px;
}

.item {
    background-color: #d3d3d3;
    height: 70px;
    font-size: 25px;
    border-radius: 50%;
}

.item2 {
    background-color: #2dffff;
    height: 70spx;
    font-size: 25px;
    border-radius: 50%;
}

２．本日学んだこと

本日学んだことは主に二つ。

Flexboxとgridの使い方、違い、特徴
CodePenの活用

今回のプログラムでは後半はgridを使いレイアウトをしたが、また違う機会があればFlexboxも活用してみたい。

今回初めてCodePenを使用しプログラムを埋め込んでみました。至らない点があれば教えていただければ嬉しいです。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up