kujirahand/calc.html

## calc.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>電卓アプリ</title>
    <style>
        input[type="text"] {
            padding: 10px;
            font-size: 24px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 2px 2px 2px #ccc;
        }

        button {
            padding: 10px;
            font-size: 22px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 2px 2px 2px #ccc;
            margin: 5px;
            width: 50px;
        }
    </style>
</head>
<body>
    <h1>電卓アプリ</h1>
    <input id="input" type="text" readonly><br>
    <button id="button7">7</button>
    <button id="button8">8</button>
    <button id="button9">9</button>
    <button id="buttonPlus">+</button><br>
    <button id="button4">4</button>
    <button id="button5">5</button>
    <button id="button6">6</button>
    <button id="buttonMinus">-</button><br>
    <button id="button1">1</button>
    <button id="button2">2</button>
    <button id="button3">3</button>
    <button id="buttonMultiply">*</button><br>
    <button id="button0">0</button>
    <button id="buttonDivide">/</button>
    <button id="buttonEqual">=</button>
    <button id="buttonClear">C</button>
    <button id="buttonBackspace">BS</button>

    <script>
        let input = document.getElementById("input");
        let buttonPlus = document.getElementById("buttonPlus");
        let buttonMinus = document.getElementById("buttonMinus");
        let buttonMultiply = document.getElementById("buttonMultiply");
        let buttonDivide = document.getElementById("buttonDivide");
        let buttonEqual = document.getElementById("buttonEqual");
        let buttonClear = document.getElementById("buttonClear");
        let buttonBackspace = document.getElementById("buttonBackspace");
        // ボタンにイベントを設定する
        for (let i = 0; i <= 9; i++) {
            let btn = document.getElementById(`button${i}`)
            btn.num = i
            btn.addEventListener("click", function(e) {
              console.log('click', e)
              addToInput(e.target.num);
            });
        }
        buttonPlus.addEventListener("click", function() {
            addToInput("+");
        });
        buttonMinus.addEventListener("click", function() {
            addToInput("-");
        });
        buttonMultiply.addEventListener("click", function() {
            addToInput("*");
        });
        buttonDivide.addEventListener("click", function() {
            addToInput("/");
        });
        buttonEqual.addEventListener("click", function() {
            calculate();
        });
        buttonClear.addEventListener("click", function() {
            clearInput();
        });
        buttonBackspace.addEventListener("click", function() {
            backspace();
        });

        function addToInput(val) {
            input.value += val;
        }

        function clearInput() {
            input.value = "";
        }

        function backspace() {
            input.value = input.value.slice(0, -1);
        }

        function calculate() {
            let expression = input.value;
            if (expression === "") {
                return;
            }
            // 数式を検証する
            let pattern = /^[-+]?[0-9]+(\.[0-9]+)?([-+\/*][-+]?[0-9]+(\.[0-9]+)?)*$/;
            if (!pattern.test(expression)) {
                alert("式が正しくありません。");
                clearInput();
                return
            }
            try {
                input.value = eval(expression);
            } catch (e) {
                if (e instanceof SyntaxError) {
                    alert("式が正しくありません。");
                    clearInput();
                }
            }
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>電卓アプリ</title>
	<style>
	input[type="text"] {
	padding: 10px;
	font-size: 24px;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: 2px 2px 2px #ccc;
	}

	button {
	padding: 10px;
	font-size: 22px;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: 2px 2px 2px #ccc;
	margin: 5px;
	width: 50px;
	}
	</style>
	</head>
	<body>
	<h1>電卓アプリ</h1>
	<input id="input" type="text" readonly><br>
	<button id="button7">7</button>
	<button id="button8">8</button>
	<button id="button9">9</button>
	<button id="buttonPlus">+</button><br>
	<button id="button4">4</button>
	<button id="button5">5</button>
	<button id="button6">6</button>
	<button id="buttonMinus">-</button><br>
	<button id="button1">1</button>
	<button id="button2">2</button>
	<button id="button3">3</button>
	<button id="buttonMultiply">*</button><br>
	<button id="button0">0</button>
	<button id="buttonDivide">/</button>
	<button id="buttonEqual">=</button>
	<button id="buttonClear">C</button>
	<button id="buttonBackspace">BS</button>

	<script>
	let input = document.getElementById("input");
	let buttonPlus = document.getElementById("buttonPlus");
	let buttonMinus = document.getElementById("buttonMinus");
	let buttonMultiply = document.getElementById("buttonMultiply");
	let buttonDivide = document.getElementById("buttonDivide");
	let buttonEqual = document.getElementById("buttonEqual");
	let buttonClear = document.getElementById("buttonClear");
	let buttonBackspace = document.getElementById("buttonBackspace");
	// ボタンにイベントを設定する
	for (let i = 0; i <= 9; i++) {
	let btn = document.getElementById(`button${i}`)
	btn.num = i
	btn.addEventListener("click", function(e) {
	console.log('click', e)
	addToInput(e.target.num);
	});
	}
	buttonPlus.addEventListener("click", function() {
	addToInput("+");
	});
	buttonMinus.addEventListener("click", function() {
	addToInput("-");
	});
	buttonMultiply.addEventListener("click", function() {
	addToInput("*");
	});
	buttonDivide.addEventListener("click", function() {
	addToInput("/");
	});
	buttonEqual.addEventListener("click", function() {
	calculate();
	});
	buttonClear.addEventListener("click", function() {
	clearInput();
	});
	buttonBackspace.addEventListener("click", function() {
	backspace();
	});

	function addToInput(val) {
	input.value += val;
	}

	function clearInput() {
	input.value = "";
	}

	function backspace() {
	input.value = input.value.slice(0, -1);
	}

	function calculate() {
	let expression = input.value;
	if (expression === "") {
	return;
	}
	// 数式を検証する
	let pattern = /^[-+]?[0-9]+(\.[0-9]+)?([-+\/][-+]?[0-9]+(\.[0-9]+)?)$/;
	if (!pattern.test(expression)) {
	alert("式が正しくありません。");
	clearInput();
	return
	}
	try {
	input.value = eval(expression);
	} catch (e) {
	if (e instanceof SyntaxError) {
	alert("式が正しくありません。");
	clearInput();
	}
	}
	}
	</script>
	</body>
	</html>
No results found