Calculatrice de Budget Ultra-Avanc\u00e9e<\/title>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/FileSaver.js\/2.0.5\/FileSaver.min.js\"><\/script>\n<style>\nbody {\n font-family: Arial, sans-serif;\n background-color: #f4f4f9;\n display: flex;\n justify-content: center;\n padding: 50px 0;\n}\n.budget-app {\n background: #fff;\n padding: 30px;\n border-radius: 10px;\n box-shadow: 0 4px 15px rgba(0,0,0,0.1);\n width: 500px;\n}\nh2 { text-align: center; color: #333; }\nlabel { display: block; margin-top: 15px; color: #555; }\ninput, button { width: 100%; padding: 8px; margin-top: 5px; border-radius: 5px; border: 1px solid #ccc; box-sizing: border-box; }\nbutton { margin-top: 15px; background-color: #007BFF; color: white; border: none; cursor: pointer; font-size: 16px; }\nbutton:hover { background-color: #0056b3; }\n.category { display: flex; gap: 10px; margin-top: 10px; }\n.category input { flex: 1; }\n.remove-btn { background-color: #dc3545; color: white; border: none; cursor: pointer; border-radius: 5px; padding: 0 8px; }\n.remove-btn:hover { background-color: #a71d2a; }\n#chartContainer, #historyChartContainer { margin-top: 30px; }\n.result { margin-top: 20px; padding: 15px; border-radius: 5px; text-align: center; font-weight: bold; }\ntable { width: 100%; border-collapse: collapse; margin-top: 20px; }\nth, td { border: 1px solid #ccc; padding: 8px; text-align: center; }\nth { background-color: #007BFF; color: white; }\n<\/style>\n<\/head>\n<body>\n<div class=\"budget-app\">\n<h2>Budget Ultra-Avanc\u00e9<\/h2>\n\n<label for=\"month\">Mois :<\/label>\n<input type=\"month\" id=\"month\">\n\n<label for=\"income\">Revenu (\u20ac) :<\/label>\n<input type=\"number\" id=\"income\" placeholder=\"Ex: 2000\">\n\n<div id=\"categoriesContainer\">\n <div class=\"category\">\n <input type=\"text\" placeholder=\"Nom de la d\u00e9pense\" class=\"cat-name\">\n <input type=\"number\" placeholder=\"Montant (\u20ac)\" class=\"cat-amount\">\n <button class=\"remove-btn\" onclick=\"removeCategory(this)\">\u00d7<\/button>\n <\/div>\n<\/div>\n\n<button onclick=\"addCategory()\">+ Ajouter une d\u00e9pense<\/button>\n<button onclick=\"saveMonthBudget()\">Enregistrer le mois<\/button>\n<button onclick=\"exportCSV()\">Exporter CSV<\/button>\n\n<div class=\"result\" id=\"result\"><\/div>\n\n<div id=\"chartContainer\">\n <canvas id=\"budgetChart\"><\/canvas>\n<\/div>\n\n<h3>Historique des Budgets<\/h3>\n<table id=\"historyTable\">\n<thead>\n<tr><th>Mois<\/th><th>Revenu<\/th><th>D\u00e9penses<\/th><th>Budget restant<\/th><\/tr>\n<\/thead>\n<tbody><\/tbody>\n<\/table>\n\n<div id=\"historyChartContainer\">\n<canvas id=\"historyChart\"><\/canvas>\n<\/div>\n<\/div>\n\n<script>\nconst categoriesContainer = document.getElementById('categoriesContainer');\n\nfunction addCategory() {\n const div = document.createElement('div');\n div.className = 'category';\n div.innerHTML = `\n <input type=\"text\" placeholder=\"Nom de la d\u00e9pense\" class=\"cat-name\">\n <input type=\"number\" placeholder=\"Montant (\u20ac)\" class=\"cat-amount\">\n <button class=\"remove-btn\" onclick=\"removeCategory(this)\">\u00d7<\/button>\n `;\n categoriesContainer.appendChild(div);\n}\n\nfunction removeCategory(btn) { btn.parentElement.remove(); }\n\nfunction saveMonthBudget() {\n const month = document.getElementById('month').value;\n if(!month) { alert('S\u00e9lectionnez un mois'); return; }\n\n const income = parseFloat(document.getElementById('income').value) || 0;\n const categoryNames = [...document.querySelectorAll('.cat-name')].map(input => input.value || 'Autre');\n const categoryAmounts = [...document.querySelectorAll('.cat-amount')].map(input => parseFloat(input.value) || 0);\n const totalExpenses = categoryAmounts.reduce((a,b)=>a+b,0);\n const remaining = income - totalExpenses;\n\n \/\/ Alerte si budget n\u00e9gatif\n if(remaining < 0) alert(`Attention! Budget d\u00e9pass\u00e9 de \u20ac${Math.abs(remaining).toFixed(2)}`);\n\n \/\/ Sauvegarde\n const budgetData = JSON.parse(localStorage.getItem('monthlyBudget')) || {};\n budgetData[month] = { income, categoryNames, categoryAmounts, remaining };\n localStorage.setItem('monthlyBudget', JSON.stringify(budgetData));\n\n displayMonthBudget(month, income, totalExpenses, remaining);\n renderMonthChart(categoryNames, categoryAmounts, remaining);\n renderHistory();\n}\n\nfunction displayMonthBudget(month, income, totalExpenses, remaining) {\n const resultDiv = document.getElementById('result');\n if(remaining >=0) { resultDiv.textContent = `Budget du ${month} : restant \u20ac${remaining.toFixed(2)}`; resultDiv.style.color='green'; }\n else { resultDiv.textContent = `Budget du ${month} : d\u00e9pass\u00e9 \u20ac${Math.abs(remaining).toFixed(2)}`; resultDiv.style.color='red'; }\n}\n\nfunction renderMonthChart(names, amounts, remaining) {\n const ctx = document.getElementById('budgetChart').getContext('2d');\n if(window.budgetChart) window.budgetChart.destroy();\n window.budgetChart = new Chart(ctx, {\n type: 'pie',\n data: { labels: [...names,'Budget restant'], datasets:[{ data:[...amounts, remaining>0?remaining:0], backgroundColor:['#007BFF','#28A745','#FFC107','#DC3545','#6C757D','#17A2B8','#FF69B4','#FFA500'] }] },\n options: { plugins:{legend:{position:'bottom'}} }\n });\n}\n\nfunction renderHistory() {\n const budgetData = JSON.parse(localStorage.getItem('monthlyBudget')) || {};\n const tbody = document.querySelector('#historyTable tbody');\n tbody.innerHTML='';\n const months = Object.keys(budgetData).sort();\n const labels=[], remainingData=[];\n\n months.forEach(m=>{\n const { income, categoryAmounts, remaining } = budgetData[m];\n const totalExpenses = categoryAmounts.reduce((a,b)=>a+b,0);\n const tr=document.createElement('tr');\n tr.innerHTML=`<td>${m}<\/td><td>${income}<\/td><td>${totalExpenses}<\/td><td>${remaining.toFixed(2)}<\/td>`;\n tbody.appendChild(tr);\n labels.push(m);\n remainingData.push(remaining);\n });\n\n const ctx=document.getElementById('historyChart').getContext('2d');\n if(window.historyChart) window.historyChart.destroy();\n window.historyChart=new Chart(ctx,{\n type:'line',\n data:{ labels:labels, datasets:[{ label:'Budget restant (\u20ac)', data:remainingData, borderColor:'#28A745', backgroundColor:'rgba(40,167,69,0.2)', fill:true, tension:0.3 }] },\n options:{ responsive:true, plugins:{legend:{display:true}} }\n });\n}\n\nfunction exportCSV() {\n const budgetData = JSON.parse(localStorage.getItem('monthlyBudget')) || {};\n let csv=\"Mois,Revenu,D\u00e9penses,Budget restant\\n\";\n Object.keys(budgetData).sort().forEach(m=>{\n const { income, categoryAmounts, remaining } = budgetData[m];\n const totalExpenses = categoryAmounts.reduce((a,b)=>a+b,0);\n csv+=`${m},${income},${totalExpenses},${remaining}\\n`;\n });\n const blob = new Blob([csv], { type: 'text\/csv;charset=utf-8;' });\n saveAs(blob, 'budget_historique.csv');\n}\n\n\/\/ Auto-chargement au d\u00e9marrage\nwindow.onload = renderHistory;\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Calculatrice de Budget Ultra-Avanc\u00e9e Budget Ultra-Avanc\u00e9 Mois : Revenu (\u20ac) : \u00d7 + Ajouter une d\u00e9pense Enregistrer le mois Exporter CSV Historique des Budgets Mois Revenu D\u00e9penses Budget restant<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1211","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1211","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/comments?post=1211"}],"version-history":[{"count":1,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1211\/revisions"}],"predecessor-version":[{"id":1212,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1211\/revisions\/1212"}],"wp:attachment":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/media?parent=1211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1211,"date":"2025-11-27T23:57:59","date_gmt":"2025-11-27T23:57:59","guid":{"rendered":"https:\/\/clubvivremieux.com\/?page_id=1211"},"modified":"2025-11-27T23:58:00","modified_gmt":"2025-11-27T23:58:00","slug":"budget-ultra-avance","status":"publish","type":"page","link":"https:\/\/clubvivremieux.com\/index.php\/budget-ultra-avance\/","title":{"rendered":"Budget Ultra-Avanc\u00e9"},"content":{"rendered":"\n\n\n\n\n\nCalculatrice de Budget Ultra-Avanc\u00e9e<\/title>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/FileSaver.js\/2.0.5\/FileSaver.min.js\"><\/script>\n<style>\nbody {\n font-family: Arial, sans-serif;\n background-color: #f4f4f9;\n display: flex;\n justify-content: center;\n padding: 50px 0;\n}\n.budget-app {\n background: #fff;\n padding: 30px;\n border-radius: 10px;\n box-shadow: 0 4px 15px rgba(0,0,0,0.1);\n width: 500px;\n}\nh2 { text-align: center; color: #333; }\nlabel { display: block; margin-top: 15px; color: #555; }\ninput, button { width: 100%; padding: 8px; margin-top: 5px; border-radius: 5px; border: 1px solid #ccc; box-sizing: border-box; }\nbutton { margin-top: 15px; background-color: #007BFF; color: white; border: none; cursor: pointer; font-size: 16px; }\nbutton:hover { background-color: #0056b3; }\n.category { display: flex; gap: 10px; margin-top: 10px; }\n.category input { flex: 1; }\n.remove-btn { background-color: #dc3545; color: white; border: none; cursor: pointer; border-radius: 5px; padding: 0 8px; }\n.remove-btn:hover { background-color: #a71d2a; }\n#chartContainer, #historyChartContainer { margin-top: 30px; }\n.result { margin-top: 20px; padding: 15px; border-radius: 5px; text-align: center; font-weight: bold; }\ntable { width: 100%; border-collapse: collapse; margin-top: 20px; }\nth, td { border: 1px solid #ccc; padding: 8px; text-align: center; }\nth { background-color: #007BFF; color: white; }\n<\/style>\n<\/head>\n<body>\n<div class=\"budget-app\">\n<h2>Budget Ultra-Avanc\u00e9<\/h2>\n\n<label for=\"month\">Mois :<\/label>\n<input type=\"month\" id=\"month\">\n\n<label for=\"income\">Revenu (\u20ac) :<\/label>\n<input type=\"number\" id=\"income\" placeholder=\"Ex: 2000\">\n\n<div id=\"categoriesContainer\">\n <div class=\"category\">\n <input type=\"text\" placeholder=\"Nom de la d\u00e9pense\" class=\"cat-name\">\n <input type=\"number\" placeholder=\"Montant (\u20ac)\" class=\"cat-amount\">\n <button class=\"remove-btn\" onclick=\"removeCategory(this)\">\u00d7<\/button>\n <\/div>\n<\/div>\n\n<button onclick=\"addCategory()\">+ Ajouter une d\u00e9pense<\/button>\n<button onclick=\"saveMonthBudget()\">Enregistrer le mois<\/button>\n<button onclick=\"exportCSV()\">Exporter CSV<\/button>\n\n<div class=\"result\" id=\"result\"><\/div>\n\n<div id=\"chartContainer\">\n <canvas id=\"budgetChart\"><\/canvas>\n<\/div>\n\n<h3>Historique des Budgets<\/h3>\n<table id=\"historyTable\">\n<thead>\n<tr><th>Mois<\/th><th>Revenu<\/th><th>D\u00e9penses<\/th><th>Budget restant<\/th><\/tr>\n<\/thead>\n<tbody><\/tbody>\n<\/table>\n\n<div id=\"historyChartContainer\">\n<canvas id=\"historyChart\"><\/canvas>\n<\/div>\n<\/div>\n\n<script>\nconst categoriesContainer = document.getElementById('categoriesContainer');\n\nfunction addCategory() {\n const div = document.createElement('div');\n div.className = 'category';\n div.innerHTML = `\n <input type=\"text\" placeholder=\"Nom de la d\u00e9pense\" class=\"cat-name\">\n <input type=\"number\" placeholder=\"Montant (\u20ac)\" class=\"cat-amount\">\n <button class=\"remove-btn\" onclick=\"removeCategory(this)\">\u00d7<\/button>\n `;\n categoriesContainer.appendChild(div);\n}\n\nfunction removeCategory(btn) { btn.parentElement.remove(); }\n\nfunction saveMonthBudget() {\n const month = document.getElementById('month').value;\n if(!month) { alert('S\u00e9lectionnez un mois'); return; }\n\n const income = parseFloat(document.getElementById('income').value) || 0;\n const categoryNames = [...document.querySelectorAll('.cat-name')].map(input => input.value || 'Autre');\n const categoryAmounts = [...document.querySelectorAll('.cat-amount')].map(input => parseFloat(input.value) || 0);\n const totalExpenses = categoryAmounts.reduce((a,b)=>a+b,0);\n const remaining = income - totalExpenses;\n\n \/\/ Alerte si budget n\u00e9gatif\n if(remaining < 0) alert(`Attention! Budget d\u00e9pass\u00e9 de \u20ac${Math.abs(remaining).toFixed(2)}`);\n\n \/\/ Sauvegarde\n const budgetData = JSON.parse(localStorage.getItem('monthlyBudget')) || {};\n budgetData[month] = { income, categoryNames, categoryAmounts, remaining };\n localStorage.setItem('monthlyBudget', JSON.stringify(budgetData));\n\n displayMonthBudget(month, income, totalExpenses, remaining);\n renderMonthChart(categoryNames, categoryAmounts, remaining);\n renderHistory();\n}\n\nfunction displayMonthBudget(month, income, totalExpenses, remaining) {\n const resultDiv = document.getElementById('result');\n if(remaining >=0) { resultDiv.textContent = `Budget du ${month} : restant \u20ac${remaining.toFixed(2)}`; resultDiv.style.color='green'; }\n else { resultDiv.textContent = `Budget du ${month} : d\u00e9pass\u00e9 \u20ac${Math.abs(remaining).toFixed(2)}`; resultDiv.style.color='red'; }\n}\n\nfunction renderMonthChart(names, amounts, remaining) {\n const ctx = document.getElementById('budgetChart').getContext('2d');\n if(window.budgetChart) window.budgetChart.destroy();\n window.budgetChart = new Chart(ctx, {\n type: 'pie',\n data: { labels: [...names,'Budget restant'], datasets:[{ data:[...amounts, remaining>0?remaining:0], backgroundColor:['#007BFF','#28A745','#FFC107','#DC3545','#6C757D','#17A2B8','#FF69B4','#FFA500'] }] },\n options: { plugins:{legend:{position:'bottom'}} }\n });\n}\n\nfunction renderHistory() {\n const budgetData = JSON.parse(localStorage.getItem('monthlyBudget')) || {};\n const tbody = document.querySelector('#historyTable tbody');\n tbody.innerHTML='';\n const months = Object.keys(budgetData).sort();\n const labels=[], remainingData=[];\n\n months.forEach(m=>{\n const { income, categoryAmounts, remaining } = budgetData[m];\n const totalExpenses = categoryAmounts.reduce((a,b)=>a+b,0);\n const tr=document.createElement('tr');\n tr.innerHTML=`<td>${m}<\/td><td>${income}<\/td><td>${totalExpenses}<\/td><td>${remaining.toFixed(2)}<\/td>`;\n tbody.appendChild(tr);\n labels.push(m);\n remainingData.push(remaining);\n });\n\n const ctx=document.getElementById('historyChart').getContext('2d');\n if(window.historyChart) window.historyChart.destroy();\n window.historyChart=new Chart(ctx,{\n type:'line',\n data:{ labels:labels, datasets:[{ label:'Budget restant (\u20ac)', data:remainingData, borderColor:'#28A745', backgroundColor:'rgba(40,167,69,0.2)', fill:true, tension:0.3 }] },\n options:{ responsive:true, plugins:{legend:{display:true}} }\n });\n}\n\nfunction exportCSV() {\n const budgetData = JSON.parse(localStorage.getItem('monthlyBudget')) || {};\n let csv=\"Mois,Revenu,D\u00e9penses,Budget restant\\n\";\n Object.keys(budgetData).sort().forEach(m=>{\n const { income, categoryAmounts, remaining } = budgetData[m];\n const totalExpenses = categoryAmounts.reduce((a,b)=>a+b,0);\n csv+=`${m},${income},${totalExpenses},${remaining}\\n`;\n });\n const blob = new Blob([csv], { type: 'text\/csv;charset=utf-8;' });\n saveAs(blob, 'budget_historique.csv');\n}\n\n\/\/ Auto-chargement au d\u00e9marrage\nwindow.onload = renderHistory;\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Calculatrice de Budget Ultra-Avanc\u00e9e Budget Ultra-Avanc\u00e9 Mois : Revenu (\u20ac) : \u00d7 + Ajouter une d\u00e9pense Enregistrer le mois Exporter CSV Historique des Budgets Mois Revenu D\u00e9penses Budget restant<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1211","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1211","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/comments?post=1211"}],"version-history":[{"count":1,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1211\/revisions"}],"predecessor-version":[{"id":1212,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1211\/revisions\/1212"}],"wp:attachment":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/media?parent=1211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}