Créer une application web gestionnaire de budget avec JavaScript
Salut à tous. Bienvenue dans le tutoriel d’aujourd’hui. Dans le tutoriel d’aujourd’hui, nous allons apprendre à créer une application budgétaire. Pour construire cette application, nous avons besoin de HTML, CSS et Javascript.
Jetons un coup d’œil au fonctionnement de cette application. Notre application budgétaire comporte deux sections de saisie. Nous utilisons la première section de saisie pour établir/mettre à jour le budget. Et nous utilisons l’autre entrée pour entrer le titre et le montant de la dépense.
Dès que l’utilisateur définit le budget ou ajoute une dépense, nous affichons une sortie qui indique le budget, les dépenses totales et le solde restant.
Suite à cette sortie, nous affichons une liste de toutes les dépenses. Cette liste d’éléments est fournie avec une option permettant de les modifier ou de les supprimer.
Structure du code source
Avant de commencer à coder, jetons un coup d’œil à la structure des dossiers du projet. Nous créons un dossier de projet appelé – 'Budget App'. Dans ce dossier, nous avons trois fichiers. Ces fichiers sont index.html qui est un document HTML. Ensuite, nous avons le style.css qui est la feuille de style. Enfin, nous avons script.js qui est un fichier de script.
Étape 1 : Structure de base HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Application de budget</title>
<!-- Icônes Font Awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
/>
<!-- Polices Google -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
rel="stylesheet"
/>
<!-- Feuille de style -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="sub-container">
<!-- Budget -->
<div class="total-amount-container">
<h3>Budget</h3>
<p class="hide error" id="erreur-budget">
La valeur ne peut pas être vide ou négative
</p>
<input
type="number"
id="montant-total"
placeholder="Entrez le montant total"
/>
<button class="submit" id="bouton-montant-total">Définir le budget</button>
</div>
<!-- Dépenses -->
<div class="user-amount-container">
<h3>Dépenses</h3>
<p class="hide error" id="erreur-titre-produit">
Les valeurs ne peuvent pas être vides
</p>
<input
type="text"
class="titre-produit"
id="titre-produit"
placeholder="Entrez le titre du produit"
/>
<input
type="number"
id="montant-utilisateur"
placeholder="Entrez le coût du produit"
/>
<button class="submit" id="verifier-montant">Vérifier le montant</button>
</div>
</div>
<!-- Résultat -->
<div class="output-container flex-space">
<div>
<p>Budget total</p>
<span id="montant">0</span>
</div>
<div>
<p>Dépenses</p>
<span id="valeur-depenses">0</span>
</div>
<div>
<p>Solde</p>
<span id="montant-solde">0</span>
</div>
</div>
</div>
<!-- Liste -->
<div class="list">
<h3>Liste des dépenses</h3>
<div class="list-container" id="liste"></div>
</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
Étape 2 : Stylisons avec CSS
Maintenant, nous allons ajouter des styles CSS à notre application pour lui donner un aspect attrayant. Voici le code CSS:Double taper sur le code pour copier son contenu
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #f7f9fd;
}
.wrapper {
width: 90%;
font-size: 16px;
max-width: 43.75em;
margin: 1em auto;
}
.container {
width: 100%;
}
.sub-container {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3em;
}
.flex {
display: flex;
align-items: center;
}
.flex-space {
display: flex;
justify-content: space-between;
align-items: center;
}
.wrapper h3 {
color: #363d55;
font-weight: 500;
margin-bottom: 0.6em;
}
.container input {
display: block;
width: 100%;
padding: 0.6em 0.3em;
border: 1px solid #d0d0d0;
border-radius: 0.3em;
color: #414a67;
outline: none;
font-weight: 400;
margin-bottom: 0.6em;
}
.container input:focus {
border-color: #587ef4;
}
.total-amount-container,
.user-amount-container {
background-color: #ffffff;
padding: 1.25em 0.9em;
border-radius: 0.3em;
box-shadow: 0 0.6em 1.2em rgba(28, 0, 80, 0.06);
}
.output-container {
background-color: #587ef4;
color: #ffffff;
border-radius: 0.3em;
box-shadow: 0 0.6em 1.2em rgba(28, 0, 80, 0.06);
margin: 2em 0;
padding: 1.2em;
}
.output-container p {
font-weight: 500;
margin-bottom: 0.6em;
}
.output-container span {
display: block;
text-align: center;
font-weight: 400;
color: #e5e5e5;
}
.submit {
font-size: 1em;
margin-top: 0.8em;
background-color: #587ef4;
border: none;
outline: none;
color: #ffffff;
padding: 0.6em 1.2em;
border-radius: 0.3em;
cursor: pointer;
}
.list {
background-color: #ffffff;
padding: 1.8em 1.2em;
box-shadow: 0 0.6em 1.2em rgba(28, 0, 80, 0.06);
border-radius: 0.6em;
}
.sublist-content {
width: 100%;
border-left: 0.3em solid #587ef4;
margin-bottom: 0.6em;
padding: 0.5em 1em;
display: grid;
grid-template-columns: 3fr 2fr 1fr 1fr;
}
.product {
font-weight: 500;
color: #363d55;
}
.amount {
color: #414a67;
margin-left: 20%;
}
.icons-container {
width: 5em;
margin: 1.2em;
align-items: center;
}
.product-title {
margin-bottom: 1em;
}
.hide {
display: none;
}
.error {
color: #ff465a;
}
.edit {
margin-left: auto;
}
.edit,
.delete {
background: transparent;
cursor: pointer;
margin-right: 1.5em;
border: none;
color: #587ef4;
}
@media screen and (max-width: 600px) {
.wrapper {
font-size: 14px;
}
.sub-container {
grid-template-columns: 1fr;
gap: 1em;
}
}
Étape 3 : Intégration du javascript
Enfin, nous implémentons les fonctionnalités de l’application budgétaire. Pour cela, nous utilisons javascript. Nous le faisons en six étapes :
Créer des références initiales
Mettre en œuvre la fonction pour définir le budget
Fonction pour désactiver les boutons Modifier / Supprimer
Créer une fonction pour modifier des éléments de liste
Créer une fonction pour créer une liste
Mettre en œuvre une fonction pour calculer les dépenses et le solde.
Double taper sur le code pour copier son contenu
let montantTotal = document.getElementById("montant-total");
let montantUtilisateur = document.getElementById("montant-utilisateur");
const boutonVerifMontant = document.getElementById("verifier-montant");
const boutonMontantTotal = document.getElementById("bouton-montant-total");
const titreProduit = document.getElementById("titre-produit");
const erreurBudget = document.getElementById("erreur-budget");
const erreurTitreProduit = document.getElementById("erreur-titre-produit");
const erreurCoutProduit = document.getElementById("erreur-cout-produit");
const montant = document.getElementById("montant");
const valeurDepenses = document.getElementById("valeur-depenses");
const montantSolde = document.getElementById("montant-solde");
const liste = document.getElementById("liste");
let montantTemp = 0;
// Partie de définition du budget
boutonMontantTotal.addEventListener("click", () => {
montantTemp = montantTotal.value;
// Entrée vide ou négative
if (montantTemp === "" || montantTemp < 0) {
erreurBudget.classList.remove("hide");
} else {
erreurBudget.classList.add("hide");
// Définir le budget
montant.innerHTML = montantTemp;
// Définir le solde
montantSolde.innerText = montantTemp - valeurDepenses.innerText;
// Vider la zone de saisie
montantTotal.value = "";
}
});
// Fonction pour désactiver les boutons Modifier et Supprimer
const desactiverBoutons = (bool) => {
let boutonsModif = document.getElementsByClassName("edit");
Array.from(boutonsModif).forEach((element) => {
element.disabled = bool;
});
};
// Fonction pour modifier les éléments de la liste
const modifierElement = (element, modif = false) => {
let divParent = element.parentElement;
let soldeCourant = montantSolde.innerText;
let depenseCourante = valeurDepenses.innerText;
let montantParent = divParent.querySelector(".montant").innerText;
if (modif) {
let texteParent = divParent.querySelector(".produit").innerText;
titreProduit.value = texteParent;
montantUtilisateur.value = montantParent;
desactiverBoutons(true);
}
montantSolde.innerText = parseInt(soldeCourant) + parseInt(montantParent);
valeurDepenses.innerText =
parseInt(depenseCourante) - parseInt(montantParent);
divParent.remove();
};
// Fonction pour créer la liste
const creerListe = (nomDepense, valeurDepense) => {
let contenuSousListe = document.createElement("div");
contenuSousListe.classList.add("sublist-content", "flex-space");
liste.appendChild(contenuSousListe);
contenuSousListe.innerHTML = `<p class="produit">${nomDepense}</p><p class="montant">${valeurDepense}</p>`;
let boutonModif = document.createElement("button");
boutonModif.classList.add("fa-solid", "fa-pen-to-square", "edit");
boutonModif.style.fontSize = "1.2em";
boutonModif.addEventListener("click", () => {
modifierElement(boutonModif, true);
});
let boutonSuppr = document.createElement("button");
boutonSuppr.classList.add("fa-solid", "fa-trash-can", "delete");
boutonSuppr.style.fontSize = "1.2em";
boutonSuppr.addEventListener("click", () => {
modifierElement(boutonSuppr);
});
contenuSousListe.appendChild(boutonModif);
contenuSousListe.appendChild(boutonSuppr);
document.getElementById("liste").appendChild(contenuSousListe);
};
// Fonction pour ajouter des dépenses
boutonVerifMontant.addEventListener("click", () => {
// Vérification des champs vides
if (!montantUtilisateur.value || !titreProduit.value) {
erreurTitreProduit.classList.remove("hide");
return false;
}
// Activer les boutons
desactiverBoutons(false);
// Dépense
let depense = parseInt(montantUtilisateur.value);
// Dépense totale (existante + nouvelle)
let somme = parseInt(valeurDepenses.innerText) + depense;
valeurDepenses.innerText = somme;
// Solde total (budget - dépense totale)
const soldeTotal = montantTemp - somme;
montantSolde.innerText = soldeTotal;
// Créer la liste
creerListe(titreProduit.value, montantUtilisateur.value);
// Vider les champs de saisie
titreProduit.value = "";
montantUtilisateur.value = "";
});
1 commentaire