开发者们大家好！我很高兴分享我的最新项目：抵押贷款计算器。对于那些想要构建一个实用的交互式 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中文网其他相关文章！
