開發者們大家好！我很高興分享我的最新項目：抵押貸款計算器。對於想要建立一個實用的互動式 Web 應用程式來使用 HTML、CSS 和 JavaScript 計算抵押貸款付款的人來說，該專案是理想的選擇。這是增強前端開發技能並創建個人財務管理有用工具的絕佳方式。
抵押貸款計算器是一款網路應用程序，旨在幫助用戶計算抵押貸款付款和總還款金額。該專案具有乾淨直覺的介面，展示瞭如何創建可在現實生活場景中使用的功能性和互動式網路工具。
以下是項目結構的概述：
Mortgage-Calculator/ ├── index.html ├── style.css └── script.js
要開始該項目，請按照以下步驟操作：
複製儲存庫：
git clone https://github.com/abhishekgurjar-in/Mortgage-Calculator.git
開啟專案目錄:
cd Mortgage-Calculator
運行項目:
index.html 檔案定義了抵押貸款計算器的結構，包括輸入欄位、按鈕和結果顯示區域。這是一個片段：
<!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>
style.css 檔案對抵押貸款計算器進行樣式設計，使其更具吸引力且易於使用。以下是一些關鍵樣式：
* {
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;
}
}
script.js 檔案包含根據使用者輸入計算抵押貸款付款的邏輯。這是一個片段：
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.');
}
});
});
您可以在此處查看抵押貸款計算器專案的現場演示。
創建抵押貸款計算器是應用前端開發技能來建立實用工具的寶貴練習。此專案示範如何建立可用於財務規劃的互動式響應式 Web 應用程式。我希望它能激勵您建立自己的工具並提高您的 Web 開發技能。快樂編碼！
這個專案是我在 Web 開發方面持續學習之旅的一部分。
以上是建立抵押貸款計算器網站的詳細內容。更多資訊請關注PHP中文網其他相關文章！
