コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

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

PHPz
リリース： 2024-08-31 06:35:03
オリジナル
290 人が閲覧しました

Build a Mortgage Calculator Website

導入

開発者の皆さん、こんにちは！私の最新プロジェクトである住宅ローン計算機を共有できることを嬉しく思います。このプロジェクトは、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 ファイルは、入力フィールド、ボタン、結果表示領域など、住宅ローン計算ツールの構造を定義します。スニペットは次のとおりです:


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

ソース：dev.to
前の記事：React サーバーから JSX を返すアクション 次の記事：グルメハンバーガーのウェブサイトを構築する
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1975
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
2132
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1802
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1700
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1709
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート