<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Expense Tracker</title>
<link rel="stylesheet" type="text/css" href="CS.css">
</head>
<body>
<div class="full_body">
<div class="title">Expense Tracker</div>
<div class="container">
<div class="expense">
<a href="#" class="button" onclick="add_expense_page()">Add Expense </a>
<br>
<div class="available-expense">
<div class="sub-title">Expense</div>
<table class="expense-table" cellspacing="10px" cellpadding="8px 20px">
<tr style="border-bottom: 1px solid white;">
<th>Amount</th>
<th>Category</th>
<th>Date</th>
<th>Note</th>
</tr>
</table>
</div>
<form action="#" class="add-new-expense">
<span>
<label for="amount">Amount</label>
<input type="text" class="form-input" name="amount" placeholder="How much?">
</span>
<span>
<label for="category">Category: </label>
<select name="category" id="category">
<option value="Food">Food</option>
<option value="Travel">Travel</option>
<option value="Groceries">Groceries</option>
<option value="Entertainment">Entertainment</option>
<option value="Others">Others</option>
</select>
</span>
<span>
<label for="date">Date:</label>
<input type="date" class="form-input" name="date" placeholder="dd-mm-yyyy">
</span>
<span>
<label for="note">Note:</label>
<input type="text" class="form-input" name="note" placeholder="What did you spend on?">
</span>
<span>
<a href="#" class="buttons" style="font-size: 15px; padding:8px 10px;" onclick="add_expense()">Submit</a>
</span>
</form>
</div>
<div class="category">
<a href="#" class="buttons" onclick="add_category_page()">Add Category</a>
<br>
<div class="sub-title">
Categories
</div>
<div class="available-categories">
<span> Food <span class="sum"></span></span>
<span>Travel <span class="sum"></span></span>
<span>Groceries <span class="sum"></span></span>
<span>Entertainment <span class="sum"></span></span>
<span>Others <span class="sum"></span></span>
</div>
<form action="#" class="add-category">
<span>
<label for="category">Category Name:</label>
<input type="text" class="form-input" name="new-category" placeholder="Enter category name">
</span>
<span>
<a href="#" class="buttons" onclick="add_category()">Submit</a>
</span>
</form>
</div>
</div>
</div>
</body>
</html>
body {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
.full_body {
font-size: 18px;
background-image: linear-gradient(to right top, #1b92ac, #00aeb2, #00c7a3, #6fdd83, #c1ec5f);
height: 800px;
}
.title {
color: white;
font-size: 30px;
display: flex;
justify-content: center;
padding: 30px;
align-items: center;
}
.container {
display: flex;
justify-content: space-between;
margin: 100px;
}
.buttons {
outline: none;
border: none;
padding: 10px 20px;
color: white;
background-color: rgb(233, 60, 60);
text-decoration: none;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
border-radius: 4px;
}
table {
background-color: rgba(0, 0, 0, 0.164);
color: white;
border: 10px solid white;
margin-top: 30px;
font-family: sans-serif;
border-radius: 4px;
}
td {
font-size: 15px;
}
.add-new-expense,
.add-category {
margin-top: 10px;
background-color: rgb(175, 224, 41);
padding: 10px;
border-radius: 4px;
border: 1px solid grey;
display: none;
}
.add-new-expense span,
.add-category span {
display: flex;
justify-content: space-between;
align-items: center;
margin: 5px 0px;
font-size: 15px;
}
.form-input {
background-color: rgba(0, 0, 0, 0.164);
padding: 8px 10px;
border: 1px solid white;
border-radius: 4px;
color: white;
font-family: 'Open Sans', sans-serif;
}
.form-input:focus {
background-color: rgba(0, 0, 0, 0.164);
border: 1px solid white;
font-family: 'Open Sans', sans-serif;
}
.available-categories {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 15px;
border: 1px solid white;
background-color: black;
color: white;
font-size: 18px;
border-radius: 4px;
}
.available-categories > span {
padding: 8px 10px;
border-bottom: 1px solid white;
display: flex;
justify-content: space-between;
align-items: center;
}
.sub-title {
font-size: 23px;
color: white;
margin-top: 30px;
}
