Skip to content

[Project] Home Renovation Budget Planner #553 #554

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cu-sanjay merged 4 commits into from
Jun 14, 2026
+1,106 −0
Merged

[Project] Home Renovation Budget Planner #553 #554

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
78ba97b
feat: Add Home Renovation Budget Planner
MistryVishwa Jun 13, 2026
5d94155
style: Upgrade UI/UX with modern glassmorphism and theme color options
MistryVishwa Jun 13, 2026
77c4021
fix: rename project folder and title to Title Case
MistryVishwa Jun 13, 2026
31c2b31
fix: Format project.json to match exact template schema
MistryVishwa Jun 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions Projects/Home Renovation Budget Planner/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
# 🏗️ Home Renovation Budget Planner

A responsive Home Renovation Budget Planner that helps homeowners, property investors, and interior designers plan renovation budgets and monitor project expenses.

## Features

- **Dashboard Overview**: See your Total Budget, Total Spent, and Remaining balance at a glance.
- **Budget Utilization Bar**: A visual progress bar that turns warning yellow at 80% capacity, and danger red when exceeding 100%.
- **Category Breakdown**: View exactly how much you're spending on categories like Interior Design, Painting, Flooring, Plumbing, etc.
- **Expense History**: Keep track of every single expense with its description, amount, and date.
- **Data Persistence**: Automatically saves all your data, budget, and project name in `LocalStorage` so you won't lose your work on refresh.
- **Theme Support**: Includes both Light and Dark mode options.
- **Navigation**: Switch cleanly between the visual Dashboard and the tabular Expenses views.

## How to Run

1. Clone the repository.
2. Navigate to `Projects/home-renovation-budget-planner/`.
3. Open `index.html` in your web browser.

## Technologies Used

- HTML5 (Semantic Structure)
- CSS3 (Variables, Grid, Flexbox, Responsive Design)
- Vanilla JavaScript (LocalStorage API, DOM manipulation, Expense Logic)

## Author

- [MistryVishwa](https://github.com/MistryVishwa)
186 changes: 186 additions & 0 deletions Projects/Home Renovation Budget Planner/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Renovation Budget Planner</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body data-color-theme="indigo">
<div class="app-container">
<!-- Sidebar -->
<aside class="sidebar">
<div class="sidebar-header">
<div class="brand">
<span class="brand-icon">✨</span>
<h2>RenoPlanner</h2>
</div>
</div>

<nav class="sidebar-nav">
<a href="#" class="nav-item active" id="navDashboard">
<span class="icon">📊</span> Dashboard
</a>
<a href="#" class="nav-item" id="navExpenses">
<span class="icon">💸</span> Expenses
</a>
</nav>

<div class="project-info panel glass">
<h3>Current Project</h3>
<input type="text" id="projectName" placeholder="Enter project name..." value="My Home Renovation">
<div class="budget-input">
<label>Total Budget ($)</label>
<input type="number" id="totalBudget" value="50000" min="0">
</div>
</div>

<div class="theme-settings panel glass">
<h3>Theme Customization</h3>
<div class="theme-controls">
<button id="themeToggle" class="btn-icon" aria-label="Toggle Dark Mode">🌙</button>
<div class="color-picker">
<button class="color-btn indigo active" data-color="indigo"></button>
<button class="color-btn emerald" data-color="emerald"></button>
<button class="color-btn rose" data-color="rose"></button>
<button class="color-btn amber" data-color="amber"></button>
</div>
</div>
</div>
</aside>

<!-- Main Content -->
<main class="main-content">
<header class="main-header">
<div>
<h1 class="page-title">Budget Dashboard</h1>
<p class="page-subtitle">Track your renovation expenses in real-time.</p>
</div>
<button id="addExpenseBtn" class="btn btn-primary shadow-hover">+ Add Expense</button>
</header>

<div class="dashboard-grid" id="dashboardView">
<!-- Overview Cards -->
<div class="overview-cards">
<div class="card summary-card glass">
<div class="card-icon primary-bg">💰</div>
<div class="card-content">
<h3>Total Budget</h3>
<div class="amount text-primary" id="displayTotalBudget">$0</div>
</div>
</div>
<div class="card summary-card glass">
<div class="card-icon danger-bg">📉</div>
<div class="card-content">
<h3>Total Spent</h3>
<div class="amount text-danger" id="displayTotalSpent">$0</div>
</div>
</div>
<div class="card summary-card glass">
<div class="card-icon success-bg">📈</div>
<div class="card-content">
<h3>Remaining</h3>
<div class="amount text-success" id="displayRemaining">$0</div>
</div>
</div>
</div>

<div class="dashboard-bottom-grid">
<!-- Progress Bar -->
<div class="card progress-card glass">
<h3>Budget Utilization</h3>
<div class="progress-wrapper">
<div class="progress-container">
<div class="progress-bar" id="budgetProgressBar"></div>
</div>
<div class="progress-labels">
<span>0%</span>
<span class="progress-text fw-bold" id="budgetProgressText">0% Used</span>
<span>100%</span>
</div>
</div>
</div>

<!-- Category Breakdown -->
<div class="card category-card glass">
<h3>Spending by Category</h3>
<div class="category-list" id="categoryBreakdown">
<!-- Populated by JS -->
</div>
</div>
</div>
</div>

<!-- Expenses View (Hidden by default) -->
<div class="expenses-view hidden" id="expensesView">
<div class="card glass full-height">
<h3>Expense History</h3>
<div class="table-container">
<table class="expense-table">
<thead>
<tr>
<th>Date</th>
<th>Description</th>
<th>Category</th>
<th>Amount</th>
<th>Action</th>
</tr>
</thead>
<tbody id="expenseTableBody">
<!-- Populated by JS -->
</tbody>
</table>
<div id="noExpensesMsg" class="empty-state">
<span class="empty-icon">📄</span>
<p>No expenses added yet.</p>
</div>
</div>
</div>
</div>
</main>
</div>

<!-- Add Expense Modal -->
<div class="modal-overlay hidden" id="expenseModal">
<div class="modal glass-modal">
<div class="modal-header">
<h2>Add New Expense</h2>
<button id="closeModalBtn" class="btn-icon">×</button>
</div>
<form id="expenseForm">
<div class="form-group">
<label>Description</label>
<input type="text" id="expDesc" required placeholder="e.g. Living room paint">
</div>
<div class="form-group">
<label>Amount ($)</label>
<input type="number" id="expAmount" required min="0.01" step="0.01">
</div>
<div class="form-group">
<label>Category</label>
<select id="expCategory" required>
<option value="Interior Design">Interior Design</option>
<option value="Painting">Painting</option>
<option value="Flooring">Flooring</option>
<option value="Furniture">Furniture</option>
<option value="Plumbing">Plumbing</option>
<option value="Electrical">Electrical Work</option>
<option value="Kitchen">Kitchen Renovation</option>
<option value="Bathroom">Bathroom Renovation</option>
<option value="Landscaping">Landscaping</option>
<option value="Misc">Miscellaneous</option>
</select>
</div>
<div class="form-group">
<label>Date</label>
<input type="date" id="expDate" required>
</div>
<button type="submit" class="btn btn-primary w-full shadow-hover">Save Expense</button>
</form>
</div>
</div>

<script src="script.js"></script>
</body>
</html>
17 changes: 17 additions & 0 deletions Projects/Home Renovation Budget Planner/project.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"title": "Home Renovation Budget Planner",
"description": "Create a responsive Home Renovation Budget Planner using HTML, CSS, and JavaScript that helps hom...",
"author": {
"name": "MistryVishwa",
"github": "MistryVishwa"
},
"tags": [
"enhancement",
"good-first-issue",
"javascript",
"frontend",
"finance",
"budgeting"
],
"entry": "index.html"
}
Loading
Loading