body.html
Changed around line 1
+
+
BudgetWise
+
+
+ Income
+ Expenses
+ Savings
+ Reports
+
+
+
+
+
+
+
Dashboard
+
+
+
Total Income
+
$0.00
+
+
+
Total Expenses
+
$0.00
+
+
+
Savings Balance
+
$0.00
+
+
+
+
+
+
+
+
+
+
Income
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Expenses
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Savings
+
+
+
+
+
+
+
+
+
+
+
+
Reports
+
+
+
+
+
+
+
+
+
+
+
+
+
Track your finances with ease and achieve your savings goals.
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://budgetwise.scroll.pub
+ metaTags
+ editButton /edit.html
+ title BudgetWise - Personal Budgeting App
+ style.css
+ body.html
+ script.js
readme.scroll
Changed around line 1
+ # budgetwise1.scroll.pub
+ Website generated by DeepSeek from prompt: Project Title: Personal Budgeting App Purpose: Create a simple and intuitive personal budgeting app that allows users to track their income, expenses, and savings goals with visual insights. Structure 1. Main Features Income Tracking: Add multiple income sources with customizable categories. Expense Tracking: Log daily expenses under predefined categories (e.g., Food, Transportation, Utilities) or add custom ones. Savings Goals: Define financial goals and track progress with visual indicators. Budget Summary: Provide an overview of the monthly budget, showing total income, expenses, and savings balance. Visual Insights: Include pie charts, bar graphs, and trend lines to analyze spending habits. Notifications: Reminders for bill payments and overspending alerts. 2. Pages Home Dashboard Summary of monthly financial activity. Quick links to add income or expenses. Income List of income sources with amounts and frequency. Add, edit, or delete sources. Expenses Itemized list of expenses grouped by category. Search and filter options. Savings A progress tracker for goals. Insights on potential savings based on current spending habits. Reports Visual graphs showing spending breakdown, savings trends, and budget adherence. 3. User Interactions Interactive forms for data entry (income, expenses, goals). Dropdowns for selecting categories. Drag-and-drop interface for reorganizing goals or budget priorities. 4. Technical Requirements Use ScrollHub to structure and visually represent app wireframes. Include detailed .scroll files for modular features. Embed live chart examples (e.g., pie chart for expenses) using HTML/CSS placeholders. 5. Key Components Usability: Ensure simple navigation with tooltips for new users. Accessibility: Comply with ADA standards for visually impaired users. Scalability: Allow users to export data as CSV or PDF for tax filing or reporting. Output Expectation: A responsive prototype hosted on ScrollHub that can be previewed live and iterated based on user feedback.
script.js
Changed around line 1
+ let income = [];
+ let expenses = [];
+ let savingsGoal = 0;
+
+ function addIncome() {
+ const form = document.getElementById('income-form');
+ form.classList.toggle('hidden');
+ }
+
+ function addExpense() {
+ const form = document.getElementById('expense-form');
+ form.classList.toggle('hidden');
+ }
+
+ function setGoal() {
+ const goalInput = document.getElementById('goal');
+ savingsGoal = parseFloat(goalInput.value);
+ updateProgress();
+ }
+
+ function updateProgress() {
+ const totalIncome = income.reduce((sum, item) => sum + item.amount, 0);
+ const totalExpenses = expenses.reduce((sum, item) => sum + item.amount, 0);
+ const savings = totalIncome - totalExpenses;
+ const progress = (savings / savingsGoal) * 100;
+
+ const progressBar = document.querySelector('.progress');
+ progressBar.style.width = `${Math.min(progress, 100)}%`;
+ }
+
+ document.getElementById('income-form').addEventListener('submit', function(e) {
+ e.preventDefault();
+ const source = this.querySelector('input[type="text"]').value;
+ const amount = parseFloat(this.querySelector('input[type="number"]').value);
+ const frequency = this.querySelector('select').value;
+
+ income.push({ source, amount, frequency });
+ updateProgress();
+ this.reset();
+ this.classList.add('hidden');
+ });
+
+ document.getElementById('expense-form').addEventListener('submit', function(e) {
+ e.preventDefault();
+ const description = this.querySelector('input[type="text"]').value;
+ const amount = parseFloat(this.querySelector('input[type="number"]').value);
+ const category = this.querySelector('select').value;
+
+ expenses.push({ description, amount, category });
+ updateProgress();
+ this.reset();
+ this.classList.add('hidden');
+ });
+
+ // Chart.js initialization
+ const expenseCtx = document.getElementById('expenseChart').getContext('2d');
+ const savingsCtx = document.getElementById('savingsChart').getContext('2d');
+
+ const expenseChart = new Chart(expenseCtx, {
+ type: 'pie',
+ data: {
+ labels: ['Food', 'Transportation', 'Utilities', 'Other'],
+ datasets: [{
+ data: [0, 0, 0, 0],
+ backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0']
+ }]
+ }
+ });
+
+ const savingsChart = new Chart(savingsCtx, {
+ type: 'line',
+ data: {
+ labels: [],
+ datasets: [{
+ label: 'Savings',
+ data: [],
+ borderColor: '#4CAF50',
+ fill: false
+ }]
+ }
+ });
+
+ function updateCharts() {
+ const categories = ['Food', 'Transportation', 'Utilities', 'Other'];
+ const expenseData = categories.map(cat =>
+ expenses.filter(e => e.category === cat).reduce((sum, e) => sum + e.amount, 0)
+ );
+
+ expenseChart.data.datasets[0].data = expenseData;
+ expenseChart.update();
+
+ const totalIncome = income.reduce((sum, item) => sum + item.amount, 0);
+ const totalExpenses = expenses.reduce((sum, item) => sum + item.amount, 0);
+ const savings = totalIncome - totalExpenses;
+
+ savingsChart.data.labels.push(new Date().toLocaleDateString());
+ savingsChart.data.datasets[0].data.push(savings);
+ savingsChart.update();
+ }
style.css
Changed around line 1
+ :root {
+ --primary-color: #4CAF50;
+ --secondary-color: #2196F3;
+ --background-color: #f5f5f5;
+ --text-color: #333;
+ --card-bg: #fff;
+ --shadow: 0 2px 4px rgba(0,0,0,0.1);
+ }
+
+ body {
+ font-family: 'Segoe UI', sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: var(--background-color);
+ color: var(--text-color);
+ line-height: 1.6;
+ }
+
+ header {
+ background-color: var(--primary-color);
+ color: white;
+ padding: 1rem;
+ text-align: center;
+ }
+
+ nav ul {
+ list-style: none;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ gap: 1rem;
+ }
+
+ nav a {
+ color: white;
+ text-decoration: none;
+ font-weight: bold;
+ }
+
+ main {
+ padding: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ section {
+ margin-bottom: 2rem;
+ }
+
+ .summary {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
+ }
+
+ .card {
+ background-color: var(--card-bg);
+ padding: 1rem;
+ border-radius: 4px;
+ box-shadow: var(--shadow);
+ text-align: center;
+ }
+
+ .actions {
+ display: flex;
+ justify-content: center;
+ gap: 1rem;
+ margin-top: 1rem;
+ }
+
+ button {
+ background-color: var(--secondary-color);
+ color: white;
+ border: none;
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background-color 0.3s;
+ }
+
+ button:hover {
+ background-color: #1976D2;
+ }
+
+ form {
+ display: grid;
+ gap: 0.5rem;
+ margin-top: 1rem;
+ }
+
+ input, select {
+ padding: 0.5rem;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ }
+
+ .progress-bar {
+ background-color: #ddd;
+ height: 20px;
+ border-radius: 10px;
+ margin-top: 1rem;
+ overflow: hidden;
+ }
+
+ .progress {
+ background-color: var(--primary-color);
+ height: 100%;
+ width: 0;
+ transition: width 0.3s;
+ }
+
+ .charts {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 1rem;
+ }
+
+ .chart-container {
+ background-color: var(--card-bg);
+ padding: 1rem;
+ border-radius: 4px;
+ box-shadow: var(--shadow);
+ }
+
+ footer {
+ text-align: center;
+ padding: 1rem;
+ background-color: var(--primary-color);
+ color: white;
+ margin-top: 2rem;
+ }
+
+ @media (max-width: 768px) {
+ nav ul {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .summary {
+ grid-template-columns: 1fr;
+ }
+ }