電卓は、単純な算術計算から複雑な科学計算まで、さまざまな分野で使用される重要なツールです。 HTML、CSS、JavaScript を使用して電卓を最初から構築すると、コーディング スキルが向上するだけでなく、これらのテクノロジがどのように連携するかについての理解も深まります。このガイドでは、加算、減算、乗算、除算を実行できる基本的な計算機の作成方法を説明します。

HTML 構造:
HTML には、計算機の表示とボタンを含むクラス計算機の div が含まれています。
各ボタンにはデータ属性 (数値の場合は data-num、操作の場合は data-op) があり、JavaScript で簡単に選択できます。
CSS スタイル:
CSS スタイルは、電卓を画面の中央に配置し、表示とボタンのスタイルを設定し、ホバー効果を提供します。
他のボタンと区別するために、等号ボタンに特定のスタイルが追加されています。
JavaScript の機能:
JavaScript はボタンのクリックを処理し、表示を更新し、計算を実行します。
handleNumber 関数は、数値入力と小数点を処理します。
handleOperator 関数は、clear、equals、算術演算などの演算を処理します。
計算関数は、選択された演算子に基づいて算術を実行します。
updateDisplay 関数は、現在の入力で表示を更新します。