Créer un site Web de calcul de prêt

Introduction

Bonjour les développeurs ! Je suis ravi de présenter mon dernier projet : un Calculateur de prêt. Ce projet est idéal pour ceux qui souhaitent créer un calculateur de prêt pratique et interactif en utilisant JavaScript. C'est un moyen fantastique d'apprendre à gérer les saisies des utilisateurs et à effectuer des calculs financiers sur le Web.

Aperçu du projet

Le Calculateur de prêt est un outil Web qui calcule le paiement mensuel d'un prêt en fonction du montant du prêt, du taux d'intérêt et du nombre de mois à rembourser. Ce projet montre comment créer un outil financier avec une interface claire et conviviale utilisant HTML, CSS et JavaScript.

Caractéristiques

• Calcul dynamique : calcule et affiche automatiquement le paiement mensuel en fonction des entrées de l'utilisateur.
• Gestion des entrées utilisateur : permet aux utilisateurs de saisir et d'ajuster le montant du prêt, le taux d'intérêt et la période de remboursement.
• Conception réactive : la calculatrice est conçue pour être visuellement attrayante et fonctionnelle sur divers appareils.

Technologies utilisées

• HTML : Fournit la structure du calculateur de prêt.
• CSS : stylise la calculatrice pour garantir qu'elle est visuellement attrayante et conviviale.
• JavaScript : gère la logique de calcul du paiement du prêt et met à jour l'affichage en fonction des entrées de l'utilisateur.

Structure du projet

Voici un aperçu de la structure du projet :

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

• index.html : Contient la structure HTML du calculateur de prêt.
• style.css : inclut des styles CSS pour créer un design moderne et réactif.
• script.js : Gère la fonctionnalité de calcul et met à jour l'affichage.

Installation

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

1. Cloner le dépôt :
   

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

2. Ouvrez le répertoire du projet :
   

   cd Loan-Calculator
   

3. Exécuter le projet :

   • Ouvrez le fichier index.html dans un navigateur Web pour afficher le calculateur de prêt.

Usage

1. Ouvrez le site Web dans un navigateur Web.
2. Entrez le montant du prêt, le taux d'intérêt et les mois à rembourser.
3. Voir la mensualité calculée affichée sous les champs de saisie.

Explication du code

HTML

Le fichier index.html définit la structure du calculateur de prêt, y compris les champs de saisie et la zone d'affichage du paiement mensuel. En voici un extrait :

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
93f0f5c25f18dab9d176bd4f6de5d30e
    1fc2df4564f5324148703df3b6ed50c1
    d1194aa6a0a1a4debf92ccfbff033ad7
    4f2fb0231f24e8aef524fc9bf9b9874f
    b2386ffb911b14667cb8f0f91ea547a7Loan Calculator6e916e0f7d1e588d4f442bf645aedb2f
    e4bb307b77bfd1a1ec7fd6c485d2bfb1
    5de102113aede4703971b3b780c58efb2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    4883ec0eb33c31828b7c767c806e14c7
        4a249f0d628e2318394fd9b75b4636b1Loan Calculator473f0a7621bec819994bb5020d29372a
        e388a4556c0f65e1904146cc1a846beeLoan Amount $ 
            b2968d6554b10f2a0d38a18c38ca42cb
        94b3e26ee717c64999d7867364b1b4a3
        e388a4556c0f65e1904146cc1a846beeInterest Rate % 
            f6b19649e74471a2b6dc87fe56d347d0
        94b3e26ee717c64999d7867364b1b4a3
        e388a4556c0f65e1904146cc1a846beeMonths to pay 
            909756883aba5e09aa843dbf7cd7588d
        94b3e26ee717c64999d7867364b1b4a3
        2538606eac380ad675374bc8a6455583Monthly Payment:94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
    ffd6ba4147bda351239915f463e46e38
        e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

CSS

Le fichier style.css stylise le calculateur de prêt, le rendant attrayant et facile à utiliser. Voici quelques styles clés :

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

Le fichier script.js contient la logique de calcul du remboursement du prêt et de mise à jour de l'affichage. En voici un extrait :

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}`;
}

Démo en direct

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

Conclusion

Construire le calculateur de prêt a été une expérience enrichissante, m'ayant permis d'appliquer JavaScript pour des calculs financiers pratiques. Cet outil est utile à tous ceux qui cherchent à gérer efficacement leurs remboursements de prêt et peut constituer un ajout précieux à votre boîte à outils de développement Web. J’espère que vous le trouverez utile et inspirant. Bon codage !

Crédits

Ce projet a été développé dans le cadre de mes efforts continus pour améliorer mes compétences JavaScript et créer des outils Web utiles.

Auteur

• Abhishek Gurjar
  • Profil GitHub

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!