HTML、CSS、JavaScriptを使用して独自の電卓を作成する

みなさん、どうしたの！

今日は、HTML、CSS、JavaScriptを使用してJavaScript計算機を作成します。

このような最終出力。

最終出力（リンクをクリック）： https://akilasachintha.github.io/HTML-CSS-JS-Calculator/

まず、HTMLとCSSから始めましょう。CSSグリッドのおかげで、ページ上ですぐに素敵な電卓の形を得ることができます。

それでは、始めましょう。

ステップ1：index.html、style.css、script.jsの3つのファイルを使用してコンピューター上の任意の場所にフォルダーを作成します

ステップ2：次に、Visual Studio Code、Notepad ++、SublimeTextなどのテキストエディターで「index.html」を開きます。まず、電卓の構造を作成します。HTMLを使用して実行します。

ステップ3：次のように宣言されたHtml5ボイラープレートコードテンプレート。VS Codeでhtml：5と入力し、Enterキーを押すと、定型コードを取得できます。

ステップ4：まず、htmlヘッダータグ内にフォントリンク、CSSスタイルシートリンク、JavaScriptリンクを含める必要があります。

ステップ5：以下のHTMLタグをbodyタグ内に配置します。これで、電卓の構造が1つずつ完成します。

ここでは、最初に2つの<p>タグを使用して、ディスプレイの履歴値と現在値の出力を表示します。次に、電卓でキーを作成する必要があります。そのために、<button>タグが使用されます。ボタンごとに一意のIDとクラスを使用して、一意に識別します。

次に、電卓の美化に行きます。これはCSSを介して行われます。

ステップ1：まず、「style.css」ファイルを開く必要があります。

ステップ2：次に、<body>タグを使用して、全身に関連するCSSスタイルを使用します。

まず、マージンをゼロにする必要があります。次に、「OpenSans」フォントをデフォルトのフォントとして使用します。

ステップ3： CSSを使用して電卓のスタイルを設定しましょう。コードは次のようになります。

上記のCSSスタイルを使用して美しい計算機を取得できます。

次に、静的ページにインタラクティブ機能を追加します。JavaScriptコードファイル「script.js」に飛び込みましょう

ステップ1：最初に「script.js」ファイルを開く必要があります。

ステップ2：次に、次のJavaScriptコードを適用することにより、必要に応じて関連する関数を取得できます。

このスクリプトのロジックを簡単に理解できるように、上記のコードに必要なコメントをすべて含めました。

概要

上記の手順を実行すると、基本的な計算機を作成する方法を学びました。さて、この記事を参考にして、独自の計算機を作成することをお勧めします。ユーザーインターフェイスを変更して、操作を追加することができます。

ソースコードもダウンロードできます。 https://github.com/akilasachintha/HTML-CSS-JS-Calculator