建立抵押貸款計算器網站-js教程-PHP中文網

首頁

web前端

js教程

建立抵押貸款計算器網站

PHPz

Aug 31, 2024 am 06:35 AM

Build a Mortgage Calculator Website

介紹

開發者們大家好！我很高興分享我的最新項目：抵押貸款計算器。對於想要建立一個實用的互動式 Web 應用程式來使用 HTML、CSS 和 JavaScript 計算抵押貸款付款的人來說，該專案是理想的選擇。這是增強前端開發技能並創建個人財務管理有用工具的絕佳方式。

項目概況

抵押貸款計算器是一款網路應用程序，旨在幫助用戶計算抵押貸款付款和總還款金額。該專案具有乾淨直覺的介面，展示瞭如何創建可在現實生活場景中使用的功能性和互動式網路工具。

特徵

互動計算器：使用者可以輸入房貸金額、期限、利率，進行精確計算。
還款選項：提供本金和利息支付以及僅利息支付選項。
響應式設計：應用程式完全回應，確保它在桌面和行動裝置上都能正常運作。

使用的技術

HTML：提供抵押貸款計算器的結構。
CSS：設定應用程式的樣式，以確保其視覺吸引力且使用者友好。
JavaScript：增加互動性並根據使用者輸入執行抵押計算。

專案結構

以下是項目結構的概述：

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

登入後複製

index.html：包含抵押貸款計算器的 HTML 結構。
style.css：包含 CSS 樣式以創建現代且響應式的設計。
script.js：管理互動元素並執行抵押計算。

安裝

要開始該項目，請按照以下步驟操作：

複製儲存庫：

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

登入後複製

開啟專案目錄:
```
cd Mortgage-Calculator
```
登入後複製
運行項目:
- 在網頁瀏覽器中開啟index.html檔案以查看抵押貸款計算器。

用法

在網頁瀏覽器中開啟網站。
在對應欄位中輸入抵押金額、期限和利率。
選擇還款選項（本金加利息或僅利息）。
點選計算按鈕查看每月還款額和總還款額。
透過調整瀏覽器視窗大小或在不同裝置上開啟網站來查看響應式設計。

程式碼說明

超文本標記語言

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>

登入後複製

CSS

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;
  }
}

登入後複製

JavaScript

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 開發方面持續學習之旅的一部分。

作者

阿布舍克·古賈爾
- GitHub 簡介

以上是建立抵押貸款計算器網站的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7500

CakePHP 教程

1377

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

如何創建和發布自己的JavaScript庫？ Mar 18, 2025 pm 03:12 PM

文章討論了創建，發布和維護JavaScript庫，專注於計劃，開發，測試，文檔和促銷策略。

如何在瀏覽器中優化JavaScript代碼以進行性能？ Mar 18, 2025 pm 03:14 PM

本文討論了在瀏覽器中優化JavaScript性能的策略，重點是減少執行時間並最大程度地減少對頁面負載速度的影響。

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

如何使用瀏覽器開發人員工具有效調試JavaScript代碼？ Mar 18, 2025 pm 03:16 PM

本文討論了使用瀏覽器開發人員工具的有效JavaScript調試，專注於設置斷點，使用控制台和分析性能。

如何使用源地圖調試縮小JavaScript代碼？ Mar 18, 2025 pm 03:17 PM

本文說明瞭如何使用源地圖通過將其映射回原始代碼來調試JAVASCRIPT。它討論了啟用源地圖，設置斷點以及使用Chrome DevTools和WebPack之類的工具。

誰得到更多的Python或JavaScript？ Apr 04, 2025 am 12:09 AM

Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。

開始使用Chart.js：PIE，DONUT和BUBBLE圖表 Mar 15, 2025 am 09:19 AM

本教程將介紹如何使用 Chart.js 創建餅圖、環形圖和氣泡圖。此前，我們已學習了 Chart.js 的四種圖表類型：折線圖和條形圖（教程二），以及雷達圖和極地區域圖（教程三）。創建餅圖和環形圖餅圖和環形圖非常適合展示某個整體被劃分為不同部分的比例。例如，可以使用餅圖展示野生動物園中雄獅、雌獅和幼獅的百分比，或不同候選人在選舉中獲得的投票百分比。餅圖僅適用於比較單個參數或數據集。需要注意的是，餅圖無法繪製值為零的實體，因為餅圖中扇形的角度取決於數據點的數值大小。這意味著任何占比為零的實體

初學者的打字稿，第2部分：基本數據類型 Mar 19, 2025 am 09:10 AM

掌握了入門級TypeScript教程後，您應該能夠在支持TypeScript的IDE中編寫自己的代碼，並將其編譯成JavaScript。本教程將深入探討TypeScript中各種數據類型。 JavaScript擁有七種數據類型：Null、Undefined、Boolean、Number、String、Symbol（ES6引入）和Object。 TypeScript在此基礎上定義了更多類型，本教程將詳細介紹所有這些類型。 Null數據類型與JavaScript一樣，TypeScript中的null

See all articles

建立抵押貸款計算器網站

介紹

項目概況

特徵

使用的技術

專案結構

安裝

用法

程式碼說明

超文本標記語言

CSS

JavaScript

現場演示

結論

製作人員

作者

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題