住宅ローン計算ウェブサイトを構築する

導入

開発者の皆さん、こんにちは！私の最新プロジェクトである住宅ローン計算機を共有できることを嬉しく思います。このプロジェクトは、HTML、CSS、JavaScript を使用して住宅ローンの支払いを計算する実用的でインタラクティブな Web アプリケーションを構築したい人に最適です。これは、フロントエンド開発スキルを向上させ、個人の財務管理に役立つツールを作成するための素晴らしい方法です。

プロジェクト概要

住宅ローン計算機 は、ユーザーが住宅ローンの支払い額と総返済額を計算できるように設計された Web アプリケーションです。このプロジェクトは、クリーンで直感的なインターフェイスを備え、実際のシナリオで使用できる機能的でインタラクティブな Web ツールを作成する方法を紹介します。

特徴

• 対話型計算機: ユーザーは住宅ローンの金額、期間、金利を入力して正確な計算を行うことができます。
• 返済オプション: 元金と利息の両方の支払いと利息のみの支払いのオプションを提供します。
• レスポンシブ デザイン: アプリケーションは完全にレスポンシブで、デスクトップとモバイル デバイスの両方で適切に動作します。

使用されている技術

• HTML: 住宅ローン計算ツールの構造を提供します。
• CSS: アプリケーションをスタイル設定して、視覚的に魅力的でユーザーフレンドリーであることを保証します。
• JavaScript: インタラクティブ性を追加し、ユーザー入力に基づいて住宅ローンの計算を実行します。

プロジェクトの構造

プロジェクト構造の概要は次のとおりです:

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

• index.html: 住宅ローン計算ツールの HTML 構造が含まれています。
• style.css: モダンでレスポンシブなデザインを作成するための CSS スタイルが含まれています。
• script.js: インタラクティブな要素を管理し、住宅ローンの計算を実行します。

インストール

プロジェクトを開始するには、次の手順に従います:

1. リポジトリのクローンを作成します:
   

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

2. プロジェクト ディレクトリを開きます:
   

   cd Mortgage-Calculator
   

3. プロジェクトを実行します:

   • Web ブラウザでindex.html ファイルを開いて、住宅ローン計算ツールを表示します。

使用法

1. Web ブラウザで Web サイトを開きます。
2. 住宅ローンの金額、期間、金利をそれぞれのフィールドに入力します。
3. 返済オプションを選択します (元金と利息、または利息のみ)。
4. 計算ボタンをクリックして、毎月の返済額と総返済額を確認します。
5. ブラウザ ウィンドウのサイズを変更するか、別のデバイスで Web サイトを開いて、レスポンシブ デザインを表示します。

コードの説明

HTML

index.html ファイルは、入力フィールド、ボタン、結果表示領域など、住宅ローン計算ツールの構造を定義します。スニペットは次のとおりです:

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


  <div class="container">
    <div class="box">
      <div class="left-box">
        <h1 id="Mortgage-Calculator">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 id="">£0.00</h1>
          <h4 id="Total-Repayment">Total Repayment: £0.00</h4>
        </div>
      </div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </div>

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 中国語 Web サイトの他の関連記事を参照してください。