チップ計算ウェブサイトを構築する

導入

開発者の皆さん、こんにちは！私の最新プロジェクト、シンプルで便利なチップ計算機をご紹介できることを嬉しく思います。このプロジェクトは、ユーザー入力の処理、計算の実行、DOM の動的更新など、JavaScript の基本的な概念を練習する絶好の機会です。 JavaScript を初めて使用する場合でも、スキルを磨くための小さなプロジェクトを探している場合でも、このチップ計算ツールは最適です。

プロジェクト概要

チップ計算機は、請求額とチップの割合に基づいて、チップを含む合計支払い額をすばやく計算できる Web ベースのアプリケーションです。このプロジェクトでは、インタラクティブなユーザー インターフェイスを作成し、計算を管理し、ユーザーにリアルタイムのフィードバックを提供する方法を示します。

特徴

• ユーザーフレンドリーなインターフェース: 使いやすいシンプルで直感的なデザイン。
• リアルタイム計算: 請求額とチップの割合を入力すると、合計金額が即座に計算されます。
• レスポンシブ デザイン: レイアウトはさまざまな画面サイズに合わせて調整され、デスクトップとモバイル デバイスの両方でシームレスなエクスペリエンスを保証します。
• リセット機能: ユーザーは入力フィールドを簡単にリセットし、新しい計算を開始できます。

使用されている技術

• HTML: Web ページと入力要素を構造化します。
• CSS: インターフェイスのスタイルを設定し、クリーンで応答性の高いデザインを保証します。
• JavaScript: 計算ロジックを処理し、合計金額をリアルタイムで更新します。

プロジェクトの構造

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

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

• index.html: チップ計算ツールの HTML 構造が含まれています。
• styles.css: 電卓の外観を向上させる CSS スタイルが含まれています。
• script.js: 計算ロジックと動的更新を管理します。

インストール

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

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

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

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

   cd Tip-Calculator
   

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

   • Web ブラウザでindex.html ファイルを開いて、チップ計算ツールの使用を開始します。

使用法

1. Web ブラウザで Web サイトを開きます。
2. 指定された入力フィールドに請求金額を入力します。
3. 請求書に追加するチップの割合を入力します。
4. 「計算」ボタンをクリックすると、チップを含む合計金額が表示されます。
5. 新しい計算を開始する場合は、フィールドをリセットします。

コードの説明

HTML

index.html ファイルには、請求金額とチップの割合の入力フィールドや計算を開始するボタンなど、チップ計算ツールの基本構造が含まれています。スニペットは次のとおりです:

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923

93f0f5c25f18dab9d176bd4f6de5d30e
    1fc2df4564f5324148703df3b6ed50c1
    4f2fb0231f24e8aef524fc9bf9b9874f
    b2386ffb911b14667cb8f0f91ea547a7Tip Calculator6e916e0f7d1e588d4f442bf645aedb2f
    e4bb307b77bfd1a1ec7fd6c485d2bfb1
    5de102113aede4703971b3b780c58efb2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d
    4883ec0eb33c31828b7c767c806e14c7
        4a249f0d628e2318394fd9b75b4636b1Tip Calculator473f0a7621bec819994bb5020d29372a
        e388a4556c0f65e1904146cc1a846beeEnter the bill amount and tip percentage to calculate the total amount94b3e26ee717c64999d7867364b1b4a3

        da55a23ba75f1a91499fd53db6dde99fBill amount:8c1ecd4bb896b2264e0711597d40766c
        da68c775d7dd560fd6878751c0c9e570
        0c6dc11e160d3b678d68754cc175188a

        54616200344afdb89867e9df0f118122Tip percentage:8c1ecd4bb896b2264e0711597d40766c
        2f56d4979a58a88631c556197730f8be
        0c6dc11e160d3b678d68754cc175188a

        c64b5582d11b3d494d9cfa5ac00d34dbCalculate65281c5ac262bf6d81768915a4a77ac0
        0c6dc11e160d3b678d68754cc175188a

        f42db1d3de5697d736e79e701ac6f5b5Total Amount:8c1ecd4bb896b2264e0711597d40766c
        2999737d3770e77603f9c3571ac488af54bdf357c58b8a65c66d7c19c8e4d114
    16b28748ea4df4d9c2150843fecfba68

    ffd6ba4147bda351239915f463e46e38
        e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

CSS

styles.css ファイルはチップ計算ツールのスタイルを設定し、クリーンで応答性の高いレイアウトを提供します。以下にいくつかの主要なスタイルを示します:

* {
    box-sizing: border-box;
}

body {
    color: white;
    background-color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container {
    background-color: rgb(0, 0, 0);
    max-width: 600px;
    margin: 100px auto;
    padding: 20px;
    box-shadow: inset;
    border-radius: 10px;
}

h1 {
    text-align: center;
}

input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 10px 0;
    width: 100%;
}

button {
    background-color: green;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    margin: 10px 0;
    text-transform: uppercase;
    transition: background-color 0.2s ease;
}

button:hover {
    background-color: #45a049;
}

#total {
    font-size: 24px;
    font-weight: bold;
    margin-top: 10px;
}

.footer {
    margin: 70px;
    text-align: center;
    color: black;
}

JavaScript

script.js ファイルは計算ロジックを処理し、ユーザー入力に基づいて合計金額を更新します。スニペットは次のとおりです:

const btn = document.getElementById("calculate");
const inputBill = document.getElementById("bill");
const inputTip = document.getElementById("tip");
const totalSpan = document.getElementById("total");

function calculateTotal() {
    const billValue = parseFloat(inputBill.value);
    const tipValue = parseFloat(inputTip.value);
    const totalValue = billValue * (1 + tipValue / 100);
    totalSpan.innerText = totalValue.toFixed(2);
}

btn.addEventListener("click", calculateTotal);

ライブデモ

ここでチップ計算機のライブデモをチェックできます。

結論

このチップ計算機の構築は楽しくて勉強になる経験で、特にインタラクティブな Web アプリケーションの作成において JavaScript についての理解が深まりました。このプロジェクトが、JavaScript を試して独自の便利なツールを構築するきっかけとなることを願っています。コーディングを楽しんでください!

クレジット

このプロジェクトは、JavaScript と DOM 操作に重点を置いて、Web 開発スキルを向上させるための私の継続的な取り組みの一環として開発されました。

著者

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

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