【HTML】【CSS】【javascript】電卓の作り方

電卓のソースコードを紹介します。以下の二つの電卓は同じCSSを使っているので、見た目は全く一緒ですが、書き方が違います。

formのnameを使い、HTMLに書き込む

 <div class="bckG">
    <div class="wrapper">
        <form class="calculator" name="calc">
            <input type="text" readonly class="result" name="txt" >
            <span class="num clear" onclick="calc.txt.value = ''">c</span>
            <span class="num" onclick="document.calc.txt.value +='/'">/</span>
            <span class="num" onclick="document.calc.txt.value +='*'">*</span>
            <span class="num" onclick="document.calc.txt.value +='7'">7</span>
            <span class="num" onclick="document.calc.txt.value +='8'">8</span>
            <span class="num" onclick="document.calc.txt.value +='9'">9</span>
            <span class="num" onclick="document.calc.txt.value +='-'">-</span>
            <span class="num" onclick="document.calc.txt.value +='4'">4</span>
            <span class="num" onclick="document.calc.txt.value +='5'">5</span>
            <span class="num" onclick="document.calc.txt.value +='6'">6</span>
            <span class="num plus" onclick="document.calc.txt.value +='+'">+</span>
            <span class="num" onclick="document.calc.txt.value +='1'">1</span>
            <span class="num" onclick="document.calc.txt.value +='2'">2</span>
            <span class="num" onclick="document.calc.txt.value +='3'">3</span>
            <span class="num" onclick="document.calc.txt.value +='0'">0</span>
            <span class="num" onclick="document.calc.txt.value +='00'">00</span>
            <span class="num" onclick="document.calc.txt.value +='.'">.</span>
            <span class="num equal" onclick="calculate()">=</span>
        </form>
    </div>
</div> 

 .bckG{
    background: #333;
    height: 600px;
    display: flex;
    margin-bottom: 100px;
}
.wrapper{
    margin: auto;
}
.wrapper .calculator{
    position: relative;
    display: grid;
    margin: auto;
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    overflow: hidden;
    z-index: 10;
    backdrop-filter: blur(15px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
    margin: auto;
}

.wrapper .calculator .result, .result2{
    grid-column: span 4;
    height: 140px;
    width: 300px;
    text-align: right;
    border: none;
    outline: none;
    padding: 10px;
    font-size: 30px;
    background: transparent;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.2);

}
.wrapper .calculator span{
    display: grid;
    place-items: center;
    width: 75px;
    height: 75px;
    color: #fff;
    font-weight: 400;
    cursor: pointer;
    font-size: 20px;
    user-select: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    transition: .5s;
}
.wrapper .calculator span:hover{
    transition: 0s;
    background: rgba(255, 255, 255, 0.05);
}
.wrapper .calculator span:active{
    background: #2785ff;
    color: #192f00;
    font-size: 24px;
    font-weight: 500;
}
.wrapper .calculator .clear{
    grid-column: span 2;
    width: 150px;
    background: rgba(255, 255, 255, 0.05);
}
.wrapper .calculator .plus{
    grid-row: span 2;
    height: 150px;
}
.wrapper .calculator .equal{
    background: rgba(255, 255, 255, 0.05);
}

 const result = document.querySelector(".result");  
    function calculate() {
        result.value = new Function("return " + result.value)();
    }

イコールはevalではなくFunctionを使いました。セキュリティ的にリスクがあるので。

javascriptをつかう方法

  <div class="bckG">
    <div class="wrapper">
        <div class="calculator" >
            <input type="text" readonly class="result2">
            <span class="num clear" onclick="clearV()">c</span>
            <span class="num" onclick="inpt('/')">/</span>
            <span class="num" onclick="inpt('*')">*</span>
            <span class="num" onclick="inpt(7)">7</span>
            <span class="num" onclick="inpt(8)">8</span>
            <span class="num" onclick="inpt(9)">9</span>
            <span class="num" onclick="inpt('-')">-</span>
            <span class="num" onclick="inpt(4)">4</span>
            <span class="num" onclick="inpt(5)">5</span>
            <span class="num" onclick="inpt(6)">6</span>
            <span class="num plus" onclick="inpt('+')">+</span>
            <span class="num" onclick="inpt(1)">1</span>
            <span class="num" onclick="inpt(2)">2</span>
            <span class="num" onclick="inpt(3)">3</span>
            <span class="num" onclick="inpt(0)">0</span>
            <span class="num" onclick="inpt('00')">00</span>
            <span class="num" onclick="inpt('.')">.</span>
            <span class="num equal" onclick="calculate()">=</span>
        </div>
    </div>
</div>

 /*上記参照 スタイルは同じです*/

 const result = document.querySelector(".result");  
    function inpt(e){
        let obj = document.querySelector(".result2");
        obj.value += e;
    }
    function calculate() {
        result.value = new Function("return " + result.value)();
    }
    function clearV(){
        result.value = '';
    }

電卓のコード2つ紹介しました。簡単な電卓であれば、数行のjavascriptで作れます。