Créer un site Web de calcul de prêt-tutoriel CSS-php.cn

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

王林

Libérer： 2024-08-27 18:01:14

original

710 Les gens l'ont consulté

Build a Loan Calculator Website

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

Copier après la connexion

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 :

Cloner le dépôt :

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

Copier après la connexion

Ouvrez le répertoire du projet :
```
cd Loan-Calculator
```
Copier après la connexion
Exécuter le projet :
- Ouvrez le fichier index.html dans un navigateur Web pour afficher le calculateur de prêt.

Usage

Ouvrez le site Web dans un navigateur Web.
Entrez le montant du prêt, le taux d'intérêt et les mois à rembourser.
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 :

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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 !