Comment créer un outil basé sur JavaScript pour suivre et analyser les dépenses personnelles?
19/03/2024
•
5
min
Dans ce guide, nous expliquerons le processus de création d'un tracker de dépenses personnelles en utilisant JavaScript, HTML et CSS. Ce guide suppose que vous êtes familiarisé avec les bases de ces technologies.
Pour faire simple, nous allons construire un outil de base où vous pouvez entrer le nom de l'article et le montant que vous avez dépensé pour celui-ci. Aucune base de données ne sera impliquée et nous n'apprendrons pas à sauvegarder les données de manière permanente.
Étape 1 : Mise en place du HTML
Nous aurons besoin d'un formulaire de saisie pour que l'utilisateur puisse entrer ses dépenses et d'un tableau pour afficher les dépenses saisies. Voici un exemple de comment vous pouvez mettre en place votre HTML :
<!DOCTYPE html>
<html>
<head>
<title>Tracker de dépenses personnelles</title>
<!-- Style (vous pouvez créer un fichier CSS externe et le lier ici) -->
<style>
/* Ajoutez ici les styles CSS */
</style>
</head>
<body>
<h1>Mon tracker de dépenses</h1>
<form id="expense-form">
<label for="name">Nom de l'objet:</label><br>
<input type="text" id="name" name="name"><br>
<label for="cost">Coût:</label><br>
<input type="number" id="cost" name="cost"><br>
<input type="submit" value="Ajouter une dépense">
</form>
<table id="expense-table">
<tr>
<th>Nom de l'objet</th>
<th>Coût</th>
</tr>
<!-- Les dépenses seront ajoutées ici de manière dynamique -->
</table>
<h2 id="total"></h2>
<!-- Incluez ici le fichier JS externe -->
<script src="app.js"></script>
</body>
</html>
Ask your specific question in Mate AI
In Mate you can connect your project, ask questions about your repository, and use AI Agent to solve programming tasks
Étape 2 : Création du JavaScript
Nous allons créer un fichier JavaScript externe nommé 'app.js'. Nous allons récupérer notre formulaire et notre tableau du DOM et attendre que le formulaire soit soumis. Lorsque le formulaire est soumis, nous empêcherons l'action de soumission par défaut du formulaire, récupérerons les valeurs de nos inputs, ajouterons une nouvelle ligne à notre tableau et effacerons nos inputs de formulaire.
document.addEventListener('DOMContentLoaded', () => {
const expenseForm = document.getElementById('expense-form');
const expenseTable = document.getElementById('expense-table');
let total = 0;
expenseForm.addEventListener('submit', (e) => {
e.preventDefault();
// Récupérer les valeurs des inputs
let name = document.getElementById('name').value;
let cost = document.getElementById('cost').value;
// Convertir le coût en nombre
cost = Number(cost);
// Vérifier si les inputs ne sont pas vides
if(name === '' || isNaN(cost) || cost === '') {
alert('Veuillez entrer des valeurs valides');
return;
}
updateTotal(cost);
appendExpense(name, cost);
// Effacer les champs d'input
document.getElementById('name').value = '';
document.getElementById('cost').value = '';
});
function appendExpense(name, cost) {
// Créer une nouvelle ligne et des cellules
let row = document.createElement('tr');
let nameCell = document.createElement('td');
let costCell = document.createElement('td');
// Mettre à jour les valeurs des cellules
nameCell.innerText = name;
costCell.innerText = `$${cost.toFixed(2)}`;
// Ajouter les cellules à la ligne
row.appendChild(nameCell);
row.appendChild(costCell);
// Ajouter la ligne au tableau
expenseTable.appendChild(row);
}
function updateTotal(cost){
// Incrementer le total
total += cost;
document.getElementById('total').innerText = "Total: $" + total.toFixed(2);
}
});
C'est un outil de base qui compile simplement les entrées d'un utilisateur. Pour améliorer cet outil, vous pourriez envisager d'utiliser une base de données pour stocker vos dépenses ou incorporer une bibliothèque de graphiques pour créer une visualisation de vos dépenses. Vous pourriez également ajouter des catégories à vos dépenses (par exemple, nourriture, voyage, etc.) ou une entrée de date pour suivre quand la dépense a été faite.
N'oubliez pas : Toujours purifier et valider vos entrées lorsqu'il s'agit de données soumises par l'utilisateur. Cet exemple ne le fait pas parce qu'il est extrêmement simpliste et ne s'occupe pas des serveurs ou des bases de données, mais dans une application réelle, c'est un must !
AI agent for developers
Boost your productivity with Mate:
easily connect your project, generate code, and debug smarter - all powered by AI.
Do you want to solve problems like this faster? Download now for free.