index.html

<!-- index.html -->
<!DOCTYPE html> 
<html> 

<head> 
	<title>Expense Tracker</title> 
	<link rel="stylesheet"
		type="text/css"
		href="style.css" /> 
</head> 

<body> 
	<div class="container"> 
		<h1>Expense Tracker</h1> 
		<p> This is the Web Expense Tracker created using HTML, CSS and JS as an
			university project. You can use this website to keep track of your expenses
			date-wise. Just enter your expenses with the amount and date and
			the "grand total" figure will reflect the total expenses. You can also delete any
			expense under the action column of the table.</p>
		</p>
		<form id="expense-form"> 
			<div class="form-control">
				<label for="expense">Expense</label>
				<input type="text"
				id="expense-name"
				placeholder="Enter Expense" required /> 
			</div>
			<div class="form-control">
				<label for="Amount">Amount</label>
				<input type="number"
				id="expense-amount"
				placeholder="Enter Amount" required /> 
			</div>
			<!--<div class="form-control">
				<label for="Category">Category</label>
				<select id="category">
					<option value="FnB">Food & Beverage</option>
					<option value="Rent">Rent</option>
					<option value="Transport">Transport</option>
					<option value="Rehab">Rehabilitation</option>
					<option value="Others">Others</option>
				</select>
			</div> -->
			<div class="form-control">
				<label for="date">Date</label>
				<input type="date"
				id="date" 
				placeholder="Date" required />
			</div>
			<button class="btn"> 
				Add Expense 
			</button> 
		</form> 
		<div class="expense-table"> 
			<table> 
				<thead> 
					<tr> 
						<th>Expense Name</th> 
						<th>Amount</th>
						<!--<th>Category</th>-->
						<th>Date</th> 
						<th>Action</th> 
					</tr> 
				</thead> 
				<tbody id="expense-list"></tbody> 
			</table> 
		</div>
	</div>
		<div class="total-amount"> 
			<h2>Grand Total:
			Rs <span id="total-amount">0</span> </h2>
		</div>  
	<script src="script.js"></script> 
</body> 

<footer>
	<p>Designed and Developed by SANIA VERMA. All rights reserved.</p>
</footer>

</html>