안녕하세요, 개발자 여러분! 저의 최신 프로젝트인 모기지 계산기를 공유하게 되어 기쁩니다. 이 프로젝트는 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.');
}
});
});
여기에서 모기지 계산기 프로젝트의 라이브 데모를 확인하실 수 있습니다.
모기지 계산기를 만드는 것은 프론트엔드 개발 기술을 적용하여 실용적인 도구를 만드는 데 있어 귀중한 연습이었습니다. 이 프로젝트는 재무 계획에 사용할 수 있는 대화형 및 반응형 웹 애플리케이션을 만드는 방법을 보여줍니다. 여러분이 자신만의 도구를 만들고 웹 개발 기술을 향상시키는 데 영감을 주기를 바랍니다. 즐거운 코딩하세요!
이 프로젝트는 웹 개발에 대한 지속적인 학습 여정의 일환으로 개발되었습니다.
위 내용은 모기지 계산기 웹사이트 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
