Bina Laman Web Kalkulator Tip-tutorial css-php.cn

Bina Laman Web Kalkulator Tip

PHPz

Lepaskan： 2024-08-19 04:24:05

asal

650 orang telah melayarinya

Build a Tip Calculator Website

pengenalan

Helo, rakan pembangun! Saya sangat teruja untuk memperkenalkan projek terbaharu saya: Kalkulator Petua yang ringkas namun berguna. Projek ini ialah peluang yang sempurna untuk mempraktikkan konsep JavaScript asas, seperti mengendalikan input pengguna, melakukan pengiraan dan mengemas kini DOM secara dinamik. Sama ada anda baru menggunakan JavaScript atau mencari projek kecil untuk mempertajam kemahiran anda, Kalkulator Petua ini ialah pilihan yang bagus.

Gambaran Keseluruhan Projek

Kalkulator Petua ialah aplikasi berasaskan web yang membolehkan pengguna mengira jumlah yang perlu dibayar dengan cepat, termasuk petua, berdasarkan jumlah bil dan peratusan tip. Projek ini menunjukkan cara membuat antara muka pengguna interaktif, mengurus pengiraan dan memberikan maklum balas masa nyata kepada pengguna.

Ciri-ciri

Antara Muka Mesra Pengguna: Reka bentuk yang ringkas dan intuitif untuk kegunaan mudah.
Pengiraan Masa Nyata: Mengira jumlah amaun dengan serta-merta semasa anda memasukkan peratusan bil dan tip.
Reka Bentuk Responsif: Reka letak dilaraskan kepada saiz skrin yang berbeza, memastikan pengalaman yang lancar pada kedua-dua desktop dan peranti mudah alih.
Tetapkan Semula Fungsi: Pengguna boleh menetapkan semula medan input dengan mudah dan memulakan pengiraan baharu.

Teknologi yang Digunakan

HTML: Menstruktur halaman web dan elemen input.
CSS: Menggayakan antara muka, memastikan reka bentuk yang bersih dan responsif.
JavaScript: Mengendalikan logik pengiraan dan mengemas kini jumlah amaun dalam masa nyata.

Struktur Projek

Berikut ialah pandangan ringkas pada struktur projek:

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

Salin selepas log masuk

index.html: Mengandungi struktur HTML untuk Kalkulator Petua.
styles.css: Termasuk gaya CSS untuk meningkatkan penampilan kalkulator.
script.js: Mengurus logik pengiraan dan kemas kini dinamik.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

Klon repositori:

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

Salin selepas log masuk

Buka direktori projek:
```
cd Tip-Calculator
```
Salin selepas log masuk
Jalankan projek:
- Buka fail index.html dalam penyemak imbas web untuk mula menggunakan Kalkulator Petua.

Penggunaan

Buka tapak web dalam penyemak imbas web.
Masukkan amaun bil dalam medan input yang ditetapkan.
Masukkan peratusan tip untuk ditambahkan pada bil.
Klik butang "Kira" untuk melihat jumlah keseluruhan termasuk petua.
Tetapkan semula medan jika anda ingin memulakan pengiraan baharu.

Penerangan Kod

HTML

Fail index.html menyediakan struktur asas Kalkulator Petua, termasuk medan input untuk jumlah bil dan peratusan tip, serta butang untuk mencetuskan pengiraan. Berikut adalah coretan:

<!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>

Salin selepas log masuk

CSS

Fail styles.css menggayakan Kalkulator Petua, memberikan reka letak yang bersih dan responsif. Berikut ialah beberapa gaya utama:

* {
    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;
}

Salin selepas log masuk

JavaScript

Fail script.js mengendalikan logik pengiraan, mengemas kini jumlah keseluruhan berdasarkan input pengguna. Berikut adalah coretan:

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

Salin selepas log masuk

Demo Langsung

Anda boleh melihat demo langsung Kalkulator Petua di sini.

Kesimpulan

Membina Kalkulator Petua ini merupakan pengalaman yang menyeronokkan dan pendidikan yang mengukuhkan pemahaman saya tentang JavaScript, terutamanya dalam mencipta aplikasi web interaktif. Saya harap projek ini memberi inspirasi kepada anda untuk mencuba JavaScript dan membina alatan berguna anda sendiri. Selamat mengekod!

Kredit

Projek ini dibangunkan sebagai sebahagian daripada perjalanan berterusan saya untuk meningkatkan kemahiran pembangunan web saya, dengan tumpuan pada JavaScript dan manipulasi DOM.

Pengarang

Abhishek Gurjar
- Profil GitHub

Atas ialah kandungan terperinci Bina Laman Web Kalkulator Tip. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!