Bina Laman Web Kalkulator Gadai Janji-tutorial js-php.cn

Build a Mortgage Calculator Website

pengenalan

Helo, pembangun! Saya sangat teruja untuk berkongsi projek terbaharu saya: Kalkulator Gadai Janji. Projek ini sesuai untuk mereka yang ingin membina aplikasi web praktikal dan interaktif yang mengira pembayaran gadai janji menggunakan HTML, CSS dan JavaScript. Ia merupakan cara yang hebat untuk meningkatkan kemahiran pembangunan bahagian hadapan anda dan mencipta alat yang berguna untuk pengurusan kewangan peribadi.

Gambaran Keseluruhan Projek

Kalkulator Gadai Janji ialah aplikasi web yang direka untuk membantu pengguna mengira pembayaran gadai janji mereka dan jumlah pembayaran balik. Dengan antara muka yang bersih dan intuitif, projek ini mempamerkan cara mencipta alat web yang berfungsi dan interaktif yang boleh digunakan dalam senario kehidupan sebenar.

Ciri-ciri

Kalkulator Interaktif: Pengguna boleh memasukkan jumlah gadai janji, tempoh dan kadar faedah untuk mendapatkan pengiraan yang tepat.
Pilihan Pembayaran Balik: Menawarkan pilihan untuk kedua-dua pembayaran pokok dan faedah serta pembayaran faedah sahaja.
Reka Bentuk Responsif: Aplikasi ini responsif sepenuhnya, memastikan ia berfungsi dengan baik pada kedua-dua peranti desktop dan mudah alih.

Teknologi yang Digunakan

HTML: Menyediakan struktur untuk Kalkulator Gadai Janji.
CSS: Menggayakan aplikasi untuk memastikan ia menarik secara visual dan mesra pengguna.
JavaScript: Menambah interaktiviti dan melaksanakan pengiraan gadai janji berdasarkan input pengguna.

Struktur Projek

Berikut ialah gambaran keseluruhan struktur projek:

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

Salin selepas log masuk

index.html: Mengandungi struktur HTML untuk Kalkulator Gadai Janji.
style.css: Termasuk gaya CSS untuk mencipta reka bentuk moden dan responsif.
script.js: Mengurus elemen interaktif dan melaksanakan pengiraan gadai janji.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

Klon repositori:

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

Salin selepas log masuk

Buka direktori projek:
```
cd Mortgage-Calculator
```
Salin selepas log masuk
Jalankan projek:
- Buka fail index.html dalam penyemak imbas web untuk melihat Kalkulator Gadai Janji.

Penggunaan

Buka tapak web dalam penyemak imbas web.
Masukkan amaun gadai janji, tempoh dan kadar faedah ke dalam medan masing-masing.
Pilih pilihan pembayaran balik (Principal & Faedah atau Faedah Sahaja).
Klik pada butang Kira untuk melihat bayaran balik bulanan dan jumlah.
Lihat reka bentuk responsif dengan mengubah saiz tetingkap penyemak imbas atau membuka tapak web pada peranti yang berbeza.

Penerangan Kod

HTML

Fail index.html mentakrifkan struktur Kalkulator Gadai Janji, termasuk medan input, butang dan kawasan paparan hasil. 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>Mortgage Calculator</title>
  <link href="https://fonts.googleapis.com/css?family=Plus+Jakarta+Sans:400,600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script src="./script.js" defer></script>
</head>
<body>
  <div class="container">
    <div class="box">
      <div class="left-box">
        <h1>Mortgage Calculator</h1>
        <p>Calculate your mortgage payments easily with this interactive tool. Enter the details below to find out your monthly and total repayments.</p>
        <div class="input-box">
          <span>£</span><input type="number" class="MortgageAmount" placeholder="Mortgage Amount">
        </div>
        <div class="input-box">
          <span>Years</span><input type="number" class="MortgageTerm" placeholder="Mortgage Term">
        </div>
        <div class="input-box">
          <span>%</span><input type="number" class="Interest" placeholder="Annual Interest Rate">
        </div>
        <div class="box-middle">
          <input type="radio" id="Repayment" name="repayment" class="option" checked>
          <label for="Repayment">Principal & Interest</label>
          <input type="radio" id="InterestOnly" name="repayment" class="option">
          <label for="InterestOnly">Interest Only</label>
        </div>
        <button class="calculate">Calculate</button>
        <div class="empty-result">
          <p>Fill out the form to see your results.</p>
        </div>
        <div class="filled-result">
          <h1>£0.00</h1>
          <h4>Total Repayment: £0.00</h4>
        </div>
      </div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </div>
</body>
</html>

Salin selepas log masuk

CSS

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

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  background-color: hsl(202, 86%, 94%);
}

.container {
  margin: auto;
  max-width: 1440px;
  background-color: hsl(202, 86%, 94%);
}

.box {
  border-radius: 20px;
  background-color: whitesmoke;
  max-width: 900px;
  margin: 160px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.left-box {
  width: 50%;
}

.left-box h1 {
  font-size: 2.5rem;
}

.left-box p {
  font-size: 1rem;
}

.input-box {
  width: 80%;
  border: 1px solid black;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.input-box span {
  width: 20px;
}

.input-box input {
  width: 70%;
  height: 100%;
  border: none;
}

.calculate {
  background-color: yellow;
  width: 50%;
  border-radius: 8px;
  height: 2.5rem;
  margin: 15px;
}

.empty-result {
  border-radius: 20px;
  padding: 10px;
  color: white;
  background-color: #1b3547;
}

.filled-result {
  display: none;
}

.footer {
  margin-top: 100px;
  text-align: center;
}

@media (max-width: 800px) {
  .box {
    flex-direction: column;
    align-items: center;
    gap: 100px;
  }
}

Salin selepas log masuk

JavaScript

Fail script.js mengandungi logik untuk mengira pembayaran gadai janji berdasarkan input pengguna. Berikut adalah coretan:

document.addEventListener('DOMContentLoaded', () => {
    const calculateButton = document.querySelector('.calculate');
    const emptyResult = document.querySelector('.empty-result');
    const filledResult = document.querySelector('.filled-result');
    const mortgageAmountInput = document.querySelector('.MortgageAmount');
    const mortgageTermInput = document.querySelector('.MortgageTerm');
    const interestRateInput = document.querySelector('.Interest');
    const repaymentOption = document.querySelector('#Repayment');
    const interestOnlyOption = document.querySelector('#InterestOnly');
    const monthlyRepaymentElement = filledResult.querySelector('h1');
    const totalRepaymentElement = filledResult.querySelector('h4');

    calculateButton.addEventListener('click', () => {
      const principal = parseFloat(mortgageAmountInput.value);
      const years = parseFloat(mortgageTermInput.value);
      const annualInterestRate = parseFloat(interestRateInput.value) / 100;
      const months = years * 12;
      let monthlyRepayment;
      let totalRepayment;

      if (repaymentOption.checked) {
        const monthlyInterestRate = annualInterestRate / 12;
        monthlyRepayment = (principal * monthlyInterestRate) / (1 - Math.pow(1 + monthlyInterestRate, -months));
        totalRepayment = monthlyRepayment * months;
      } else if (interestOnlyOption.checked) {
        monthlyRepayment = (principal * annualInterestRate) / 12;
        totalRepayment = principal + (monthlyRepayment * months);
      }

      if (!isNaN(monthlyRepayment) && !isNaN(totalRepayment)) {
        monthlyRepaymentElement.textContent = `£${monthlyRepayment.toFixed(2)}`;
        totalRepaymentElement.textContent = `£${totalRepayment.toFixed(2)}`;
        emptyResult.style.display = 'none';
        filledResult.style.display = 'block';
      } else {
        alert('Please enter valid numbers for all fields.');
      }
    });
});

Salin selepas log masuk

Demo Langsung

Anda boleh melihat demo langsung projek Kalkulator Gadai Janji di sini.

Kesimpulan

Mencipta Kalkulator Gadai Janji merupakan latihan yang berharga dalam menggunakan kemahiran pembangunan bahagian hadapan untuk membina alat praktikal. Projek ini menunjukkan cara mencipta aplikasi web interaktif dan responsif yang boleh digunakan untuk perancangan kewangan. Saya harap ia memberi inspirasi kepada anda untuk membina alatan anda sendiri dan meningkatkan kemahiran pembangunan web anda. Selamat mengekod!

Kredit

Projek ini dibangunkan sebagai sebahagian daripada perjalanan pembelajaran berterusan saya dalam pembangunan web.

Pengarang

Abhishek Gurjar
- Profil GitHub

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