<div class="tracker-box">
<h3>Expense Tracker</h3>
<div class="balance">Total: <span id="total">$0.00</span></div>
<ul id="expenseList" class="list"></ul>
<div class="add-form">
<input type="text" id="desc" placeholder="Item name">
<input type="number" id="amount" placeholder="Amount">
<button onclick="addExpense()">Add</button>
</div>
</div>
.tracker-box {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: #fff;
padding: 30px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
max-width: 400px;
margin: 0 auto;
}
h3 {
margin-top: 0;
color: #1f2937;
}
.balance {
font-size: 1.5rem;
font-weight: 700;
color: #2563eb;
margin-bottom: 20px;
}
.list {
list-style: none;
padding: 0;
margin-bottom: 20px;
max-height: 200px;
overflow-y: auto;
}
.list li {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #f3f4f6;
color: #4b5563;
}
.list li:last-child { border: none; }
.add-form {
display: flex;
gap: 10px;
}
input {
padding: 10px;
border: 1px solid #d1d5db;
border-radius: 8px;
outline: none;
width: 100%;
}
button {
background: #10b981;
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
}
const list = document.getElementById("expenseList");
const totalEl = document.getElementById("total");
const descInput = document.getElementById("desc");
const amountInput = document.getElementById("amount");
let total = 0;
function addExpense() {
const desc = descInput.value;
const amount = parseFloat(amountInput.value);
if (desc === "" || isNaN(amount)) return;
const li = document.createElement("li");
li.innerHTML = `${desc} <span>$${amount.toFixed(2)}</span>`;
list.appendChild(li);
total += amount;
totalEl.innerText = "$" + total.toFixed(2);
descInput.value = "";
amountInput.value = "";
}
