建立一個小費計算器網站

介紹

各位開發者大家好！我很高興向大家介紹我的最新項目：一個簡單又方便的小費計算器。該專案是練習基本 JavaScript 概念的絕佳機會，例如處理使用者輸入、執行計算和動態更新 DOM。無論您是 JavaScript 新手還是正在尋找一個小專案來提高您的技能，這個小費計算器都是一個不錯的選擇。

項目概況

小費計算器是一個基於網絡的應用程序，允許用戶根據賬單金額和小費百分比快速計算支付總額，包括小費。此專案示範如何建立互動式使用者介面、管理計算並向使用者提供即時回饋。

特徵

• 使用者友善的介面：簡單直覺的設計，易於使用。
• 即時計算：輸入帳單和小費百分比即可立即計算總金額。
• 響應式設計：佈局可適應不同的螢幕尺寸，確保桌面和行動裝置上的無縫體驗。
• 重置功能：使用者可以輕鬆重置輸入欄位並開始新的計算。

使用的技術

• HTML：建立網頁和輸入元素。
• 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. 運行項目:

   • 在網頁瀏覽器中開啟index.html 檔案以開始使用小費計算器。

用法

1. 在網頁瀏覽器中開啟網站。
2. 在指定的輸入欄位中輸入帳單金額。
3. 輸入要加到帳單中的小費百分比。
4. 點選「計算」按鈕查看包括小費在內的總金額。
5. 如果您想開始新的計算，請重設欄位。

程式碼說明

超文本標記語言

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);

現場演示

您可以在此處查看小費計算器的現場演示。

結論

建立這個小費計算器是一次有趣且具有教育意義的體驗，它增強了我對 JavaScript 的理解，特別是在創建互動式 Web 應用程式方面。我希望這個專案能夠激勵您嘗試 JavaScript 並建立自己的有用工具。快樂編碼！

製作人員

這個專案是我不斷提升 Web 開發技能的一部分，重點是 JavaScript 和 DOM 操作。

作者

• 阿布舍克·古賈爾
  • GitHub 簡介

以上是建立一個小費計算器網站的詳細內容。更多資訊請關注PHP中文網其他相關文章！