すべてチャットGPTのやりとりだけで計算をつくっていただけました
ほんとすごいですねチャットGPT
（ちなみに下記の紹介文もほぼチャットGPTが書き出したものです）
ではどうぞ
JavaScriptとjQueryを使用したシンプルな計算機の実装方法
こんにちは、皆さん！今回は、JavaScriptとjQueryを使用してシンプルな計算機を実装する方法について紹介します。この計算機は、HTML、CSS、およびJavaScriptを使って作成されています。
この計算機は、数字と四則演算子のボタンを使って直感的に操作することができます。JavaScriptの eval() 関数を使用して、入力された式を評価し、結果を表示します。また、jQueryを使用してボタンのクリックイベントを簡潔に処理しています。
実際の実装方法に興味がある方は、以下のコードをご覧ください。
まず、jQueryを使うために、以下のCDNを <head> タグ内に追加します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
そして、HTMLとJavaScriptのコードを以下のように書き換えます。
<scripsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>シンプルな計算機</title>
<style>
body {
font-family: Arial, sans-serif;
}
.calculator {
width: 250px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
text-align: center; /* 中央揃え */
}
.calculator input[type="text"] {
width: 100%;
margin-bottom: 10px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
}
.calculator input[type="button"] {
width: 23%; /* ボタンの幅 */
margin: 1%; /* ボタンの間隔 */
padding: 10px;
font-size: 16px;
border: none;
border-radius: 3px;
cursor: pointer;
box-sizing: border-box;
}
.calculator input[type="button"]:hover {
background-color: #ddd;
}
/* 修正：ボタンを4列にするために、ボタンの親要素に対して flex レイアウトを適用 */
.calculator .button-row {
display: flex;
justify-content: space-between; /* ボタンを均等に配置 */
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="display" readonly>
<div class="button-row"> <!-- ボタンを含む div 要素 -->
<input type="button" value="7">
<input type="button" value="8">
<input type="button" value="9">
<input type="button" value="+">
</div>
<div class="button-row"> <!-- ボタンを含む div 要素 -->
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="-">
</div>
<div class="button-row"> <!-- ボタンを含む div 要素 -->
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="*">
</div>
<div class="button-row"> <!-- ボタンを含む div 要素 -->
<input type="button" value="0">
<input type="button" value=".">
<input type="button" value="C">
<input type="button" value="/">
</div>
<input type="button" value="=" id="calculate"> <!-- = ボタンに ID を追加 -->
</div>
<script>
$(document).ready(function() {
$('.calculator input[type="button"]').click(function() {
var value = $(this).val();
if (value === 'C') {
$('#display').val('');
} else if (value === '=') {
try {
$('#display').val(eval($('#display').val()));
} catch (error) {
$('#display').val('エラー');
}
} else {
$('#display').val(function(index, currentValue) {
return currentValue + value;
});
}
});
});
</script>
</body>
</html>
この方法を使えば、簡単にカスタマイズしたり、他のプロジェクトに組み込んだりすることができます。ぜひお試しください！
それでは、楽しいプログラミングを！
