チップ計算ウェブサイトを構築する-CSSチュートリアル-php.cn

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

PHPz

リリース： 2024-08-19 04:24:05

オリジナル

649 人が閲覧しました

Build a Tip Calculator Website

導入

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

プロジェクト概要

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

特徴

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

使用されている技術

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

プロジェクトの構造

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

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

ログイン後にコピー

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

インストール

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

リポジトリのクローンを作成します:
```
git clone https://github.com/abhishekgurjar-in/Tip-Calculator.git
```
ログイン後にコピー
プロジェクトディレクトリを開きます:
```
cd Tip-Calculator
```
ログイン後にコピー
プロジェクトを実行します:
- Web ブラウザでindex.html ファイルを開いて、チップ計算ツールの使用を開始します。

使用法

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

コードの説明

HTML

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tip Calculator</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./script.js" defer></script>
</head>

<body>
    <div class="container">
        <h1>Tip Calculator</h1>
        <p>Enter the bill amount and tip percentage to calculate the total amount</p>

        <label for="bill">Bill amount:</label>
        <input type="number" id="bill">
        <br>

        <label for="tip">Tip percentage:</label>
        <input type="number" id="tip">
        <br>

        <button id="calculate">Calculate</button>
        <br>

        <label for="total">Total Amount:</label>
        <span id="total"></span>
    </div>

    <div class="footer">
        <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
</body>

</html>

ログイン後にコピー

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 を試して独自の便利なツールを構築するきっかけとなることを願っています。コーディングを楽しんでください!