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

Bina Laman Web Kalkulator Pinjaman

王林

Lepaskan： 2024-08-27 18:01:14

asal

663 orang telah melayarinya

Build a Loan Calculator Website

pengenalan

Helo, pembangun! Saya teruja untuk membentangkan projek terbaharu saya: Kalkulator Pinjaman. Projek ini sesuai untuk mereka yang berminat untuk mencipta kalkulator pinjaman praktikal dan interaktif menggunakan JavaScript. Ini adalah cara yang hebat untuk belajar tentang pengendalian input pengguna dan melakukan pengiraan kewangan di web.

Gambaran Keseluruhan Projek

Kalkulator Pinjaman ialah alat berasaskan web yang mengira bayaran bulanan untuk pinjaman berdasarkan jumlah pinjaman, kadar faedah dan bilangan bulan untuk membayar balik. Projek ini menunjukkan cara membina alat kewangan dengan antara muka yang bersih dan mesra pengguna menggunakan HTML, CSS dan JavaScript.

Ciri-ciri

Pengiraan Dinamik: Mengira dan memaparkan bayaran bulanan secara automatik berdasarkan input pengguna.
Pengendalian Input Pengguna: Membenarkan pengguna memasukkan dan melaraskan jumlah pinjaman, kadar faedah dan tempoh pembayaran balik.
Reka Bentuk Responsif: Kalkulator digayakan agar menarik secara visual dan berfungsi merentas pelbagai peranti.

Teknologi yang Digunakan

HTML: Menyediakan struktur untuk Kalkulator Pinjaman.
CSS: Menggayakan kalkulator untuk memastikan ia menarik secara visual dan mesra pengguna.
JavaScript: Mengendalikan logik untuk mengira bayaran pinjaman dan mengemas kini paparan berdasarkan input pengguna.

Struktur Projek

Berikut ialah gambaran keseluruhan struktur projek:

Loan-Calculator/
├── index.html
├── style.css
└── script.js

Salin selepas log masuk

index.html: Mengandungi struktur HTML untuk Kalkulator Pinjaman.
style.css: Termasuk gaya CSS untuk mencipta reka bentuk moden dan responsif.
script.js: Menguruskan fungsi pengiraan dan mengemas kini paparan.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

Klon repositori:

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

Salin selepas log masuk

Buka direktori projek:
```
cd Loan-Calculator
```
Salin selepas log masuk
Jalankan projek:
- Buka fail index.html dalam pelayar web untuk melihat Kalkulator Pinjaman.

Penggunaan

Buka tapak web dalam penyemak imbas web.
Masukkan amaun pinjaman, kadar faedah dan bulan untuk membayar balik.
Lihat bayaran bulanan yang dikira dipaparkan di bawah medan input.

Penerangan Kod

HTML

Fail index.html mentakrifkan struktur Kalkulator Pinjaman, termasuk medan input dan kawasan paparan untuk pembayaran bulanan. Berikut adalah coretan:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loan Calculator</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./script.js" defer></script>
</head>
<body>
    <div class="container">
        <h1>Loan Calculator</h1>
        <p>Loan Amount $ 
            <input onchange="calculateLoan()" class="input" type="number" id="loan-amount" min="1" max="500000" value="10000">
        </p>
        <p>Interest Rate % 
            <input onchange="calculateLoan()" class="input" type="number" id="interest-rate" min="0" max="100" value="10" step=".1">
        </p>
        <p>Months to pay 
            <input onchange="calculateLoan()" class="input" type="number" id="months-to-pay" min="6" max="48" value="12">
        </p>
        <p class="payment" id="payment">Monthly Payment:</p>
    </div>
    <div class="footer">
        <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
</body>
</html>

Salin selepas log masuk

CSS

Fail style.css menggayakan Kalkulator Pinjaman, menjadikannya menarik dan mudah digunakan. Di bawah ialah beberapa gaya utama:

body {
    background: #4285f4;
    padding: 0;
    margin: 0;
    display: flex;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
}

.container {
    background: black;
    color: aliceblue;
    padding: 20px;
    border-radius: 10px;
}

.input {
    width: 100%;
    font-size: 20px;
    height: 30px;
}

.payment {
    font-weight: 600;
    font-size: 20px;
}

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

Salin selepas log masuk

JavaScript

Fail script.js mengandungi logik untuk mengira bayaran pinjaman dan mengemas kini paparan. Berikut adalah coretan:

function calculateLoan() {
    let loanAmountValue = document.getElementById("loan-amount").value;
    let interestRateValue = document.getElementById("interest-rate").value;
    let MonthsToPayValue = document.getElementById("months-to-pay").value;

    let interest = (loanAmountValue * (interestRateValue * 0.01)) / MonthsToPayValue;
    let monthlyPayment = (loanAmountValue / MonthsToPayValue + interest).toFixed(2);

    document.getElementById("payment").innerHTML = `Monthly Payment: ${monthlyPayment}`;
}

Salin selepas log masuk

Demo Langsung

Anda boleh menyemak demo langsung projek Kalkulator Pinjaman di sini.

Kesimpulan

Membina Kalkulator Pinjaman merupakan pengalaman yang bermanfaat, membolehkan saya menggunakan JavaScript untuk pengiraan kewangan praktikal. Alat ini berguna untuk sesiapa sahaja yang ingin menguruskan pembayaran pinjaman mereka dengan berkesan dan boleh menjadi tambahan yang berharga kepada kit alat pembangunan web anda. Saya harap anda mendapati ia membantu dan memberi inspirasi. Selamat mengekod!

Kredit

Projek ini dibangunkan sebagai sebahagian daripada usaha berterusan saya untuk meningkatkan kemahiran JavaScript saya dan mencipta alatan web yang berguna.