ローン計算ウェブサイトを構築する-CSSチュートリアル-php.cn

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

王林

リリース： 2024-08-27 18:01:14

オリジナル

785 人が閲覧しました

Build a Loan Calculator Website

導入

開発者の皆さん、こんにちは！私の最新プロジェクトであるローン計算機を紹介できることを嬉しく思います。このプロジェクトは、JavaScript を使用した実用的でインタラクティブなローン計算ツールの作成に興味がある人に最適です。これは、Web 上でのユーザー入力の処理と財務計算の実行について学ぶための素晴らしい方法です。

プロジェクト概要

ローン計算機は、ローン金額、金利、返済月数に基づいてローンの月々の支払額を計算するウェブベースのツールです。このプロジェクトでは、HTML、CSS、JavaScript を使用して、クリーンでユーザーフレンドリーなインターフェイスを備えた財務ツールを構築する方法を示します。

特徴

動的計算: ユーザー入力に基づいて月々の支払額を自動的に計算して表示します。
ユーザー入力処理: ユーザーはローン金額、金利、返済期間を入力して調整できます。
レスポンシブデザイン: 電卓は、さまざまなデバイスで視覚的に魅力的で機能するようにスタイル設定されています。

使用されている技術

HTML: ローン計算ツールの構造を提供します。
CSS: 電卓のスタイルを設定して、視覚的に魅力的で使いやすいものにします。
JavaScript: ローンの支払いを計算し、ユーザー入力に基づいて表示を更新するロジックを処理します。

プロジェクトの構造

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

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

ログイン後にコピー

index.html: ローン計算ツールの HTML 構造が含まれています。
style.css: モダンでレスポンシブなデザインを作成するための CSS スタイルが含まれています。
script.js: 計算機能を管理し、表示を更新します。

インストール

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

リポジトリのクローンを作成します:
```
git clone https://github.com/abhishekgurjar-in/Loan-Calculator.git
```
ログイン後にコピー
プロジェクトディレクトリを開きます:
```
cd Loan-Calculator
```
ログイン後にコピー
プロジェクトを実行します:
- Web ブラウザでindex.html ファイルを開いて、ローン計算ツールを表示します。

使用法

Web ブラウザで Web サイトを開きます。
ローン金額、金利、返済月数を入力します。
入力フィールドの下に表示される、計算された月々の支払額を表示します。

コードの説明

HTML

index.html ファイルは、入力フィールドや月々の支払いの表示領域など、ローン計算ツールの構造を定義します。スニペットは次のとおりです:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loan Calculator</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./script.js" defer></script>
</head>
<body>
    <div class="container">
        <h1>Loan Calculator</h1>
        <p>Loan Amount $ 
            <input onchange="calculateLoan()" class="input" type="number" id="loan-amount" min="1" max="500000" value="10000">
        </p>
        <p>Interest Rate % 
            <input onchange="calculateLoan()" class="input" type="number" id="interest-rate" min="0" max="100" value="10" step=".1">
        </p>
        <p>Months to pay 
            <input onchange="calculateLoan()" class="input" type="number" id="months-to-pay" min="6" max="48" value="12">
        </p>
        <p class="payment" id="payment">Monthly Payment:</p>
    </div>
    <div class="footer">
        <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
</body>
</html>

ログイン後にコピー

CSS

style.css ファイルはローン計算ツールのスタイルを設定し、魅力的で使いやすいものにします。以下にいくつかの主要なスタイルを示します:

body {
    background: #4285f4;
    padding: 0;
    margin: 0;
    display: flex;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
}

.container {
    background: black;
    color: aliceblue;
    padding: 20px;
    border-radius: 10px;
}

.input {
    width: 100%;
    font-size: 20px;
    height: 30px;
}

.payment {
    font-weight: 600;
    font-size: 20px;
}

.footer {
    color: white;
    margin-top: 120px;
    text-align: center;
}

ログイン後にコピー

JavaScript

script.js ファイルには、ローンの支払いを計算し、表示を更新するためのロジックが含まれています。スニペットは次のとおりです:

function calculateLoan() {
    let loanAmountValue = document.getElementById("loan-amount").value;
    let interestRateValue = document.getElementById("interest-rate").value;
    let MonthsToPayValue = document.getElementById("months-to-pay").value;

    let interest = (loanAmountValue * (interestRateValue * 0.01)) / MonthsToPayValue;
    let monthlyPayment = (loanAmountValue / MonthsToPayValue + interest).toFixed(2);

    document.getElementById("payment").innerHTML = `Monthly Payment: ${monthlyPayment}`;
}

ログイン後にコピー

ライブデモ

ここでローン計算プロジェクトのライブデモをチェックできます。

結論

ローン計算ツールの構築は、JavaScript を適用して実際の財務計算を行うことができる、やりがいのある経験でした。このツールは、ローンの支払いを効果的に管理したい人にとって役立ち、Web 開発ツールキットへの価値ある追加となります。参考になり、インスピレーションが得られることを願っています。コーディングを楽しんでください!