シンプルな計算ウェブサイトを構築する

導入

開発者の皆さん、こんにちは！私の最新プロジェクトであるシンプルな計算機を共有できることを嬉しく思います。このプロジェクトは、特に数学的演算の処理、DOM の動的更新、対話型ユーザー インターフェイスの作成など、JavaScript の基本を学ぶのに最適な方法です。 Web 開発が初めての場合でも、JavaScript スキルを磨きたいと考えている場合でも、この Simple Calculator プロジェクトは優れた出発点となります。

プロジェクト概要

簡易計算機は、ユーザーが加算、減算、乗算、除算などの基本的な算術演算を実行できる Web ベースのアプリケーションです。このプロジェクトでは、計算を実行するためのユーザー入力を効率的に処理しながら、応答性の高いユーザーフレンドリーなインターフェイスを作成する方法に焦点を当てています。

特徴

• 直感的なインターフェース: 簡単に操作できるすっきりとしたシンプルなデザイン。
• 基本的な算術演算: 加算、減算、乗算、除算をサポートします。
• クリアおよび削除機能: ユーザーは、ワンクリックで入力をクリアしたり、最後のエントリを削除したりできます。
• レスポンシブ デザイン: さまざまなデバイスや画面サイズにわたって一貫した使いやすさを保証します。

使用されている技術

• HTML: Web ページと入力要素を構造化します。
• CSS: 電卓インターフェイスのスタイルを設定し、クリーンで応答性の高いデザインを保証します。
• JavaScript: 計算ロジックとユーザー インタラクションを管理します。

プロジェクトの構造

プロジェクトの構造を簡単に見てみましょう:

Simple-Calculator/
├── index.html
├── styles.css
└── script.js

• index.html: Simple Calculator の HTML 構造が含まれています。
• styles.css: 電卓の外観と応答性を向上させる CSS スタイルが含まれています。
• script.js: 計算ロジックとユーザー インタラクションを管理します。

インストール

プロジェクトを開始するには、次の手順に従います:

1. リポジトリのクローンを作成します:
   

   git clone https://github.com/abhishekgurjar-in/Simple-Calculator.git
   

2. プロジェクト ディレクトリを開きます:
   

   cd Simple-Calculator
   

3. プロジェクトを実行します:

   • Web ブラウザでindex.html ファイルを開いて、簡易電卓の使用を開始します。

使用法

1. Web ブラウザで Web サイトを開きます。
2. 数値を入力し、電卓ボタンを使用して算術演算を実行します。
3. 「AC」ボタンを使用してすべての入力をクリアするか、「DEL」ボタンを使用して最後のエントリを削除します。
4. 「=」ボタンをクリックすると、計算結果が表示されます。

コードの説明

HTML

index.html ファイルは、表示領域や算術演算用のボタンなど、簡易電卓の基本構造を提供します。スニペットは次のとおりです:

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7Simple Calculator6e916e0f7d1e588d4f442bf645aedb2f
    af75c476cdb7e6c074ca6da9b40841de
    90392ec4442ad9ff612213ec639da4832cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    924ff17625d603f964501dd897c96cc6
      4a249f0d628e2318394fd9b75b4636b1Simple Calculator473f0a7621bec819994bb5020d29372a
    16b28748ea4df4d9c2150843fecfba68
    4883ec0eb33c31828b7c767c806e14c7
      484fa028d8c6f85de53c7938dec280ce
        81304ad60882cdf6a4703237057e689b
        dc6dce4a544fdca2df29d5ac0ea9906b
          88c70033a81354858c2d5d5f8799f2d2AC65281c5ac262bf6d81768915a4a77ac0
          88c70033a81354858c2d5d5f8799f2d2DEL65281c5ac262bf6d81768915a4a77ac0
          88c70033a81354858c2d5d5f8799f2d2%65281c5ac262bf6d81768915a4a77ac0
          88c70033a81354858c2d5d5f8799f2d2/65281c5ac262bf6d81768915a4a77ac0
        16b28748ea4df4d9c2150843fecfba68
        dc6dce4a544fdca2df29d5ac0ea9906b
          7a766ea05486930017614b5a53f01815765281c5ac262bf6d81768915a4a77ac0
          7a766ea05486930017614b5a53f01815865281c5ac262bf6d81768915a4a77ac0
          7a766ea05486930017614b5a53f01815965281c5ac262bf6d81768915a4a77ac0
          88c70033a81354858c2d5d5f8799f2d2*65281c5ac262bf6d81768915a4a77ac0
        16b28748ea4df4d9c2150843fecfba68
        dc6dce4a544fdca2df29d5ac0ea9906b
          7a766ea05486930017614b5a53f01815465281c5ac262bf6d81768915a4a77ac0
          7a766ea05486930017614b5a53f01815565281c5ac262bf6d81768915a4a77ac0
          7a766ea05486930017614b5a53f01815665281c5ac262bf6d81768915a4a77ac0
          88c70033a81354858c2d5d5f8799f2d2-65281c5ac262bf6d81768915a4a77ac0
        16b28748ea4df4d9c2150843fecfba68
        dc6dce4a544fdca2df29d5ac0ea9906b
          7a766ea05486930017614b5a53f01815165281c5ac262bf6d81768915a4a77ac0
          7a766ea05486930017614b5a53f01815265281c5ac262bf6d81768915a4a77ac0
          7a766ea05486930017614b5a53f01815365281c5ac262bf6d81768915a4a77ac0
          88c70033a81354858c2d5d5f8799f2d2+65281c5ac262bf6d81768915a4a77ac0
        16b28748ea4df4d9c2150843fecfba68
        dc6dce4a544fdca2df29d5ac0ea9906b
          7a766ea05486930017614b5a53f018150065281c5ac262bf6d81768915a4a77ac0
          7a766ea05486930017614b5a53f01815065281c5ac262bf6d81768915a4a77ac0
          7a766ea05486930017614b5a53f01815.65281c5ac262bf6d81768915a4a77ac0
          7c8d25676e5efa114cb91329eb362165=65281c5ac262bf6d81768915a4a77ac0
        16b28748ea4df4d9c2150843fecfba68
      16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
    ffd6ba4147bda351239915f463e46e38
      e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

CSS

styles.css ファイルは簡易電卓のスタイルを設定し、モダンで使いやすいレイアウトを提供します。以下にいくつかの主要なスタイルを示します:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(45deg, #0a0a0a, #3a4452);
}

.header {
    color: white;
    margin: 30px;
    text-align: center;
}

.calculator {
    border: 1px solid #717377;
    padding: 20px;
    border-radius: 16px;
    background: transparent;
    box-shadow: 0px 3px 15px rgba(113, 115, 119, 0.5);
}

input {
    width: 320px;
    border: none;
    padding: 24px;
    margin: 10px;
    background: transparent;
    box-shadow: 0px 3px 15px rgba(84, 84, 84, 0.1);
    font-size: 40px;
    text-align: right;
    cursor: pointer;
    color: #ffffff;
}

input::placeholder {
    color: #ffffff;
}

button {
    border: none;
    width: 60px;
    height: 60px;
    margin: 10px;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    font-size: 20px;
    box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

.equalBtn {
    background-color: #fb7c14;
}

.operator {
    color: #6dee0a;
}

.footer {
    color: white;
    margin: 50px;
    text-align: center;
}

JavaScript

script.js ファイルは、計算を実行し、ユーザー操作を処理するためのロジックを管理します。スニペットは次のとおりです:

let input = document.getElementById("inputBox");
let buttons = document.querySelectorAll("button");

let string = "";
let arr = Array.from(buttons);

arr.forEach((button) => {
  button.addEventListener("click", (e) => {
    if (e.target.innerHTML === "=") {
      string = eval(string);
      input.value = string;
    } else if (e.target.innerHTML === "AC") {
      string = "";
      input.value = string;
    } else if (e.target.innerHTML === "DEL") {
      string = string.substring(0, string.length - 1);
      input.value = string;
    } else {
      string += e.target.innerHTML;
      input.value = string;
    }
  });
});

ライブデモ

ここで簡易電卓のライブデモをチェックできます。

結論

このシンプルな電卓の作成は、JavaScript とインタラクティブな Web アプリケーションの構築方法についての理解を深めた、やりがいのある経験でした。このプロジェクトが、皆さんが独自の JavaScript プロジェクトを試してみるようになることを願っています。コーディングを楽しんでください!

クレジット

このプロジェクトは、JavaScript とユーザー インタラクションに焦点を当て、Web 開発スキルを向上させる私の旅の一環として開発されました。

著者

• アビシェク・グルジャル
  • GitHub プロフィール

以上がシンプルな計算ウェブサイトを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。