Erstellen Sie eine Hypothekenrechner-Website-js-Tutorial-php.cn

Build a Mortgage Calculator Website

Einführung

Hallo Entwickler! Ich freue mich, Ihnen mein neuestes Projekt vorzustellen: einen Hypothekenrechner. Dieses Projekt ist ideal für diejenigen, die eine praktische, interaktive Webanwendung erstellen möchten, die Hypothekenzahlungen mithilfe von HTML, CSS und JavaScript berechnet. Es ist eine fantastische Möglichkeit, Ihre Frontend-Entwicklungsfähigkeiten zu verbessern und ein nützliches Tool für das persönliche Finanzmanagement zu erstellen.

Projektübersicht

Der Hypothekenrechner ist eine Webanwendung, mit der Benutzer ihre Hypothekenzahlungen und Gesamtrückzahlungsbeträge berechnen können. Mit einer übersichtlichen und intuitiven Benutzeroberfläche zeigt dieses Projekt, wie man ein funktionales und interaktives Web-Tool erstellt, das in realen Szenarien verwendet werden kann.

Merkmale

Interaktiver Rechner: Benutzer können Hypothekenbetrag, Laufzeit und Zinssatz eingeben, um genaue Berechnungen zu erhalten.
Rückzahlungsoptionen: Bietet Optionen sowohl für Kapital- und Zinszahlungen als auch für reine Zinszahlungen.
Responsives Design: Die Anwendung reagiert vollständig, sodass sie sowohl auf Desktop- als auch auf Mobilgeräten gut funktioniert.

Verwendete Technologien

HTML: Stellt die Struktur für den Hypothekenrechner bereit.
CSS: Gestaltet die Anwendung so, dass sie optisch ansprechend und benutzerfreundlich ist.
JavaScript: Fügt Interaktivität hinzu und führt die Hypothekenberechnungen basierend auf Benutzereingaben durch.

Projektstruktur

Hier ein Überblick über die Projektstruktur:

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

Nach dem Login kopieren

index.html: Enthält die HTML-Struktur für den Hypothekenrechner.
style.css: Enthält CSS-Stile, um ein modernes und ansprechendes Design zu erstellen.
script.js: Verwaltet die interaktiven Elemente und führt die Hypothekenberechnungen durch.

Installation

Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:

Klonen Sie das Repository:

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

Nach dem Login kopieren

Öffnen Sie das Projektverzeichnis:
```
cd Mortgage-Calculator
```
Nach dem Login kopieren
Führen Sie das Projekt aus:
- Öffnen Sie die Datei index.html in einem Webbrowser, um den Hypothekenrechner anzuzeigen.

Verwendung

Öffnen Sie die Websitein einem Webbrowser.
Geben Sie den Hypothekenbetrag, die Laufzeit und den Zinssatz in die entsprechenden Felder ein.
Wählen Sie die Rückzahlungsoption (Kapital und Zinsen oder Nur Zinsen).
Klicken Sie auf die Schaltfläche Berechnen, um die monatlichen und gesamten Rückzahlungen anzuzeigen.
Sehen Sie sich das responsive Design an, indem Sie die Größe des Browserfensters ändern oder die Website auf verschiedenen Geräten öffnen.

Code-Erklärung

HTML

Die Datei index.html definiert die Struktur des Hypothekenrechners, einschließlich Eingabefeldern, Schaltflächen und Ergebnisanzeigebereichen. Hier ist ein Ausschnitt:

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

Nach dem Login kopieren

CSS

Die style.css-Datei gestaltet den Hypothekenrechner und macht ihn attraktiv und benutzerfreundlich. Nachfolgend sind einige wichtige Stile aufgeführt:

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

Nach dem Login kopieren

JavaScript

Die Datei script.js enthält die Logik zur Berechnung der Hypothekenzahlungen basierend auf Benutzereingaben. Hier ist ein Ausschnitt:

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.');
      }
    });
});

Nach dem Login kopieren

Live-Demo

Sie können sich hier die Live-Demo des Hypothekenrechner-Projekts ansehen.

Abschluss

Die Erstellung des Hypothekenrechners war eine wertvolle Übung zur Anwendung von Frontend-Entwicklungsfähigkeiten, um ein praktisches Tool zu erstellen. Dieses Projekt zeigt, wie man eine interaktive und reaktionsfähige Webanwendung erstellt, die für die Finanzplanung verwendet werden kann. Ich hoffe, es inspiriert Sie dazu, Ihre eigenen Tools zu entwickeln und Ihre Webentwicklungsfähigkeiten zu verbessern. Viel Spaß beim Codieren!

Credits

Dieses Projekt wurde als Teil meiner kontinuierlichen Lernreise in der Webentwicklung entwickelt.

Autor

Abhishek Gurjar
- GitHub-Profil

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Hypothekenrechner-Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!