Créer un site Web de calcul d'hypothèque-js tutoriel-php.cn

Build a Mortgage Calculator Website

Introduction

Bonjour les développeurs ! Je suis ravi de partager mon dernier projet : un Calculateur hypothécaire. Ce projet est idéal pour ceux qui souhaitent créer une application Web pratique et interactive qui calcule les versements hypothécaires en utilisant HTML, CSS et JavaScript. C'est un moyen fantastique d'améliorer vos compétences en développement front-end et de créer un outil utile pour la gestion des finances personnelles.

Aperçu du projet

Le Calculateur hypothécaire est une application Web conçue pour aider les utilisateurs à calculer leurs versements hypothécaires et le montant total des remboursements. Avec une interface claire et intuitive, ce projet montre comment créer un outil Web fonctionnel et interactif pouvant être utilisé dans des scénarios réels.

Caractéristiques

Calculatrice interactive : les utilisateurs peuvent saisir le montant, la durée et le taux d'intérêt de l'hypothèque pour obtenir des calculs précis.
Options de remboursement : propose des options pour le paiement du principal et des intérêts ainsi que pour les paiements d'intérêts uniquement.
Conception réactive : l'application est entièrement réactive, garantissant qu'elle fonctionne bien sur les appareils de bureau et mobiles.

Technologies utilisées

HTML : Fournit la structure du calculateur hypothécaire.
CSS : stylise l'application pour garantir qu'elle est visuellement attrayante et conviviale.
JavaScript : ajoute de l'interactivité et effectue les calculs hypothécaires en fonction des entrées de l'utilisateur.

Structure du projet

Voici un aperçu de la structure du projet :

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

Copier après la connexion

index.html : Contient la structure HTML du calculateur hypothécaire.
style.css : inclut des styles CSS pour créer un design moderne et réactif.
script.js : Gère les éléments interactifs et effectue les calculs hypothécaires.

Installation

Pour démarrer le projet, suivez ces étapes :

Cloner le dépôt :

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

Copier après la connexion

Ouvrez le répertoire du projet :
```
cd Mortgage-Calculator
```
Copier après la connexion
Exécuter le projet :
- Ouvrez le fichier index.html dans un navigateur Web pour afficher le calculateur hypothécaire.

Usage

Ouvrez le site Web dans un navigateur Web.
Saisissez le montant de l'hypothèque, la durée et le taux d'intérêt dans les champs respectifs.
Sélectionnez l'option de remboursement (Capital et intérêts ou Intérêts uniquement).
Cliquez sur le bouton Calculer pour voir les remboursements mensuels et totaux.
Affichez le design réactif en redimensionnant la fenêtre du navigateur ou en ouvrant le site Web sur différents appareils.

Explication du code

HTML

Le fichier index.html définit la structure du calculateur hypothécaire, y compris les champs de saisie, les boutons et les zones d'affichage des résultats. En voici un extrait :

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

Copier après la connexion

CSS

Le fichier style.css stylise le calculateur hypothécaire, le rendant attrayant et facile à utiliser. Voici quelques styles clés :

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

Copier après la connexion

Javascript

Le fichier script.js contient la logique de calcul des versements hypothécaires en fonction des entrées de l'utilisateur. En voici un extrait :

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

Copier après la connexion

Démo en direct

Vous pouvez consulter la démo en direct du projet Mortgage Calculator ici.

Conclusion

La création du calculateur hypothécaire a été un exercice précieux pour appliquer les compétences de développement frontend afin de créer un outil pratique. Ce projet montre comment créer une application Web interactive et réactive pouvant être utilisée pour la planification financière. J'espère que cela vous incitera à créer vos propres outils et à améliorer vos compétences en développement Web. Bon codage !