<!
DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Budget & Bills Manager</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f5f5f5;
margin: 0;
padding: 0;
}
header, nav, main {
padding: 1rem;
margin: auto;
max-width: 800px;
}
nav a {
margin: 0 10px;
text-decoration: none;
color: #2c3e50;
font-weight: bold;
}
section {
background: #fff;
padding: 1rem;
margin-top: 1rem;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
input, button {
padding: 0.5rem;
margin-right: 0.5rem;
margin-top: 0.5rem;
}
ul {
padding-left: 1rem;
}
li {
background: #e9ecef;
margin-bottom: 0.5rem;
padding: 0.5rem;
border-radius: 4px;
}
</style>
</head>
<body>
<header>
<h1>Budget & Bills Manager</h1>
</header>
<nav>
<a href="#dashboard">Dashboard</a>
<a href="#income">Income</a>
<a href="#expenses">Expenses</a>
<a href="#bills">Bills</a>
</nav>
<main>
<section id="dashboard">
<h2>Dashboard</h2>
<p>Overview of your income, expenses, and bills.</p>
</section><section id="income">
<h2>Income</h2>
<input type="text" id="incomeSource" placeholder="Source" />
<input type="number" id="incomeAmount" placeholder="Amount" />
<button onclick="addIncome()">Add Income</button>
<ul id="incomeList"></ul>
</section>
<section id="expenses">
<h2>Expenses</h2>
<input type="text" id="expenseDesc" placeholder="Description" />
<input type="number" id="expenseAmount" placeholder="Amount" />
<button onclick="addExpense()">Add Expense</button>
<ul id="expenseList"></ul>
</section>
<section id="bills">
<h2>Bills</h2>
<input type="text" id="billName" placeholder="Bill Name" />
<input type="number" id="billAmount" placeholder="Amount" />
<input type="date" id="billDueDate" />
<button onclick="addBill()">Add Bill</button>
<ul id="billList"></ul>
</section>
</main> <script>
function addIncome() {
const src = document.getElementById('incomeSource').value;
const amt = document.getElementById('incomeAmount').value;
if (!src || !amt) return;
const li = document.createElement('li');
li.textContent = `${src} - $${parseFloat(amt).toFixed(2)}`;
document.getElementById('incomeList').appendChild(li);
document.getElementById('incomeSource').value = '';
document.getElementById('incomeAmount').value = '';
}
function addExpense() {
const desc = document.getElementById('expenseDesc').value;
const amt = document.getElementById('expenseAmount').value;
if (!desc || !amt) return;
const li = document.createElement('li');
li.textContent = `${desc} - $${parseFloat(amt).toFixed(2)}`;
document.getElementById('expenseList').appendChild(li);
document.getElementById('expenseDesc').value = '';
document.getElementById('expenseAmount').value = '';
}
function addBill() {
const name = document.getElementById('billName').value;
const amt = document.getElementById('billAmount').value;
const date = document.getElementById('billDueDate').value;
if (!name || !amt || !date) return;
const li = document.createElement('li');
li.textContent = `${name} - $${parseFloat(amt).toFixed(2)} due on ${date}`;
document.getElementById('billList').appendChild(li);
document.getElementById('billName').value = '';
document.getElementById('billAmount').value = '';
document.getElementById('billDueDate').value = '';
}
</script></body>
</html>
