Tutorial HTML/JS : créer une calculatrice crédit

Créer une calculatrice crédit en HTML/JS est assez simple. Dans ce tutorial, nous allons voir comment créer une calculatrice crédit de A à Z avec l’aide de jQuery.

La démo.

L’idée : l’internaute renseigne le montant du crédit, la durée du crédit et le taux nominal du crédit. Nous partons du principe que l’emprunt doit être remboursé chaque mois. Nous afficherons la mensualité, le taux annuel effectif global (TAEG) et le coût total du crédit, en d’autres termes, la somme des intérêts.

HTML

On part d’un fichier HTML simple avec la librairie jQuery.

On ajoute les champs qui vont permettre aux utilisateurs de jouer avec le montant, la durée et le taux, juste après avoir ouvert le tag body.

Comme vous pouvez le voir, nous avons choisi d’utiliser des input de type range pour jouer sur le montant et le taux. Le type range est approprié dans ces deux cas. Pour le montant, nous avons défini un montant de départ (6 000), un minimum (1 000), un maximum (200 000) et un pas (1 000). Même idée pour le taux d’intérêt nominal !

Pour la durée, on a choisi des input de type radio car le choix est plus limité et qu’il est plus évident pour l’utilisateur de cliquer directement sur la durée désirée, ici de 6 à 72 mois, avec un intervalle de 6 mois.

Petite subtilité, nous avons deux span associés aux input de type range. Ils nous serviront à afficher la valeur choisi par l’utilisateur pour le montant et le taux d’intérêt nominal. Ils sont donc identifiés par un id.

Il nous faut enfin un peu de HTML pour afficher les résultats :

Nous avons donc une liste avec trois items : la mensualité, le coût total du crédit et le taux annuel effectif global.

De la même manière que pour afficher les valeurs du montant et du taux d’intérêt nominal, nous avons trois span, chacun avec son id.

JavaScript

Il va falloir faire plusieurs choses :

  • récupérer les valeurs montant, taux d’intérêt nominal et durée
  • afficher les valeurs montant et taux d’intérêt nominal
  • calculer la mensualité, le taux annuel effectif global, le coût du crédit et retourner ces valeurs
  • lancer le calcul au chargement de la page et à nouveau dès que l’utilisateur change une valeur (montant, taux d’intérêt nominal ou durée)

Sous le code d’appel à jQuery, nous allons donc créer une fonction :

Nous avons donc nommé notre fonction clacCredit, nous l’appelons au chargement de la page et nous l’appelons aussi dès que le montant, la durée ou le taux d’intérêt annuel est changé.

A l’intérieur de notre fonction, nous allons commencer par récupérer les valeurs :

Nous allons afficher le montant et le taux d’intérêt nominal pour que l’utilisateur est un retour sur ses choix. Pour faire les choses correctement, nous allons utiliser une fonction supplémentaire de séparateur de milliers.

Nous calculons la mensualité, le coût du crédit et le taux annuel effectif. Replongez-vous alors dans vos cours de mathématiques financières pour retrouver la formule de calcul d’une mensualité et de taux effectif. Pour calculer le coût du crédit, c’est évidemment plus simple.

Il ne reste qu’à afficher les résultats, c’est le même principe que ci-dessus. Voici donc le code :

Voilà, c’est terminé ! Il ne vous reste qu’à mettre en forme votre calculatrice grâce aux CSS.

Vous savez désormais comment créer une calculatrice  de crédit. Si vous avez des questions, n’hésitez pas à les poser dans l’espace de commentaires ci-dessous !

Leave a comment