Scribd
Importer
2 vues6 pages

Dette

Le document présente une application web pour la gestion des dettes, permettant aux utilisateurs d'ajouter, de payer et de suivre leurs dettes. Il inclut des fonctionnalités pour afficher les détails des dettes, le total dû et payé, ainsi qu'un historique des transactions. L'application utilise le stockage local pour conserver les données des dettes entre les sessions.

Transféré par

ulrichtamo44
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
2 vues6 pages

Dette

Le document présente une application web pour la gestion des dettes, permettant aux utilisateurs d'ajouter, de payer et de suivre leurs dettes. Il inclut des fonctionnalités pour afficher les détails des dettes, le total dû et payé, ainsi qu'un historique des transactions. L'application utilise le stockage local pour conserver les données des dettes entre les sessions.

Transféré par

ulrichtamo44
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

<!

DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Gestion intelligente des dettes</title>

<style>
body {
font-family: Arial;
background: #0f172a;
color: white;
padding: 15px;
}
h2 { text-align: center; }

input, select, button {


padding: 10px;
margin: 5px;
border-radius: 8px;
border: none;
}

button {
background: #22c55e;
color: white;
}

table {
width: 100%;
margin-top: 20px;
border-collapse: collapse;
}

td, th {
padding: 10px;
border-bottom: 1px solid #334155;
text-align: center;
}

.alert {
color: red;
font-weight: bold;
}

.stats {
margin-top: 15px;
padding: 10px;
background: #1e293b;
border-radius: 10px;
}
</style>
</head>

<body>

<h2> Gestion des dettes</h2>

<input type="text" id="nom" placeholder="Nom">


<input type="number" id="montant" placeholder="Montant">
<input type="date" id="date">
<select id="mode">
<option>Cash</option>
<option>Mobile Money</option>
<option>Orange Money</option>
</select>

<button onclick="ajouter()">Ajouter</button>

<div class="stats">
Total dû : <span id="totalDette">0</span><br>
Total payé : <span id="totalPaye">0</span>
</div>

<table>
<thead>
<tr>
<th>Nom</th>
<th>Montant</th>
<th>Payé</th>
<th>Reste</th>
<th>Date</th>
<th>Mode</th>
<th>Statut</th>
<th>Action</th>
</tr>
</thead>

<tbody id="table"></tbody>
</table>

<script>
let dettes = [Link]([Link]("dettes")) || [];

function afficher() {
let table = [Link]("table");
[Link] = "";

let totalDette = 0;
let totalPaye = 0;

[Link]((d, i) => {
let reste = [Link] - [Link];
totalDette += [Link];
totalPaye += [Link];

let statut = reste === 0 ? "Payé" : "En cours";

let aujourd = new Date().toISOString().split("T")[0];


let alerte = [Link] < aujourd && reste > 0 ? "alert" : "";

[Link] += `
<tr class="${alerte}">
<td>${[Link]}</td>
<td>${[Link]}</td>
<td>${[Link]}</td>
<td>${reste}</td>
<td>${[Link]}</td>
<td>${[Link]}</td>
<td>${statut}</td>
<td>
<button onclick="payer(${i})"></button>
<button onclick="voir(${i})"></button>
<button onclick="supprimer(${i})"></button>
</td>
</tr>
`; // <-- ICI il manquait
});

[Link]("totalDette").innerText = totalDette;
[Link]("totalPaye").innerText = totalPaye;
}

function ajouter() {
let nom = [Link]("nom").[Link]();
let montant = parseFloat([Link]("montant").value);
let date = [Link]("date").value;
let mode = [Link]("mode").value;

if (!nom || isNaN(montant) || montant <= 0 || !date) {


alert("Entre des informations valides");
return;
}

let existant = [Link](d => [Link]() === [Link]());

if (existant) {
[Link] += montant;

[Link]({
type: "emprunt",
montant: montant,
date: date,
mode: mode
});

} else {
[Link]({
nom,
montant,
paye: 0,
date,
mode,
historique: [
{
type: "emprunt",
montant: montant,
date: date,
mode: mode
}
]
});
}

sauvegarder();
}

function payer(i) {
let montant = prompt("Montant payé ?");
montant = parseFloat(montant);

if (isNaN(montant) || montant <= 0) {


alert("Montant invalide");
return;
}

dettes[i].paye += montant;

dettes[i].[Link]({
type: "paiement",
montant: montant,
date: new Date().toLocaleDateString(),
mode: "Paiement"
});

sauvegarder();
}

function supprimer(i) {
[Link](i, 1);
sauvegarder();
}

function sauvegarder() {
[Link]("dettes", [Link](dettes));
afficher();
}
function voir(i) {
let d = dettes[i];
let reste = [Link] - [Link];
let pourcentage = (([Link] / [Link]) * 100).toFixed(1);

let historiqueHTML = "";

[Link](h => {
if ([Link] === "emprunt") {
historiqueHTML += ` Emprunt : +${[Link]} FCFA (${[Link]}) le ${[Link]}\n`;
} else {
historiqueHTML += ` Paiement : -${[Link]} FCFA le ${[Link]}\n`;
}
});

alert(
` DÉTAIL COMPLET

Nom : ${[Link]}

Montant total : ${[Link]}


Total payé : ${[Link]}
Reste : ${reste}

Progression : ${pourcentage}%

-------------------------
HISTORIQUE COMPLET :
-------------------------
${historiqueHTML}`
);
}

afficher();
</script>

</body>
</html>

Vous aimerez peut-être aussi