HTML CODE :-
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<title>EXPENSE TRACKER</title>
<link rel="stylesheet" href="ExpenseTracker.css">
<div class="image">
<div class="full_body">
<div class="title">
!! EXPENSE TRACKER !!
</div>
<div class="container">
<div class="expenses">
<a href="#" class="buttons" onclick="add_expense_page()">Add Expense</a>
<br>
<div class="available-expenses">
<div class="sub-title">Expenses</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 class="some">
<a href="#" class="buttons" 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 CATGORY NAME:: ">
</span>
<span>
<a href="#" class="buttons" onclick="add_category()">
SUBMIT
</a>
</span>
</form>
</div>
</div>
</div>
</div>
CSS CODE :-
.full_body{
font-size: 18px;
height: 800px;
background-image: linear-gradient(to right top, #1b92ac,#00aeb2,#00c7a3,#6fdd83,#c1ec5f);
}
.body{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: cursive;
}
.title{
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size:30px;
padding: 30px;
font-family: Georgia, 'Times New Roman', Times, serif;
}
.container{
display: flex;
justify-content: space-between;
margin:100px;
}
.buttons{
outline:none;
border: none;
color:white;
background-color:rgb(233,60,60);
padding:10px 20px;
text-decoration: none;
font-size:18px;
font-family: Georgia, 'Times New Roman', Times, serif;
border-radius: 4px;
}
table{
background-color: rgba(0,0,0,0.164);
color: white;
border : 10px solid white;
margin-top:30px;
font-family: Georgia, 'Times New Roman', Times, 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;
align-items: center;
justify-content: center;
font-size: 15px;
margin:5px 0px;
}
.form-input{
background-color: rgba(0,0,0,0.164);
padding: 8px 10px;
border-radius: 4px;
font-family: Georgia, 'Times New Roman', Times, serif;
color:white;
border : 1px solid white;
}
.form-input:focus{
background-color: rgba(0,0,0,0.164);
border: 1px solid white;
outline: none;
font-family: Georgia, 'Times New Roman', Times, serif;
}
.available-categories{
display:flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding:15px;
border-radius: 4px;
border:1px solid white;
background-color: rgba(0,0,0,0.164);
color:white;
font-size: 18px;
}
.available-categories > span{
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 10px;
border-bottom:1px solid white ;
}
.sub-title{
color:white;
font-size: 23px;
margin-top:30px;
}
.some{
font-size: 15px;
padding:8px 10px;
}
JS CODE :-
let expense_per_category = [0, 0, 0, 0, 0];
var count = 4;
update_sum();
function update_sum() {
var sum = document.querySelectorAll(".sum");
for (var i = 0; i < sum.length; i++) {
sum[i].innerHTML = " - " + expense_per_category[i] + " Rs. Spent ";
}
}
function add_expense(){
var amount = document.getElementsByClassName("form-input")[0].value;
console.log(amount);
var date = document.getElementsByClassName("form-input")[1].value;
console.log(date);
var note = document.getElementsByClassName("form-input")[2].value;
console.log(note);
var category = document.getElementsByClassName("form-input")[3].selectedIndex;
console.log(category);
var selected = document.getElementsByTagName("option")[category].value;
if (amount && date && note && selected) {
alert("SUCCESSFULLY ADDED EXPENSE !! ");
var table = document.getElementsByTagName("table")[0];
var new_row = document.createElement("tr");
new_row.innerHTML = `<tr style=border-bottom:1px solid white;>
<td>${amount}</td>
<td>${selected}</td>
<td>${date}</td>
<td>${note}</td>
</tr>
`;
table.appendChild(new_row);
expense_per_category[category] += parseInt(expense_per_category[category])+parseInt(amount);
update_sum();
console.log(count);
document.getElementsByClassName("add-new-expense")[0].getElementsByClassName.display="none";
}
else {
alert(" Please enter all the details !! ");
}
}
function add_category() {
var new_category_value = document.getElementsByName("new-category")[0].value;
if (new_category_value) {
var dropdown = document.getElementsByName("category")[0];
var available_categories = document.getElementsByClassName("available-categories")[0];
var new_category_option = document.createElement("option");
new_category_option.innerHTML = `<option>${new_category_value}</option>`;
count++;
expense_per_category[count] = 0;
var new_category_span = document.createElement("span");
new_category_span.innerHTML = `<span>${new_category_value}<span class="sum"> ${expense_per_category[count]}Rs Spent</span></span>`;
dropdown.appendChild(new_category_span);
available_categories.appendChild(new_category_option);
document.getElementsByClassName("add category")[0].style.display = "none";
}
}
function add_category_page() {
if (document.getElementsByClassName("add-category")[0].style.display == "block") {
document.getElementsByClassName("add-category")[0].style.display = "none";
}
else {
document.getElementsByClassName("add-category")[0].style.display = "block";
}
}
function add_expense_page() {
if (document.getElementsByClassName("add-new-expense")[0].style.display == "block") {
document.getElementsByClassName("add-new-expense")[0].style.display = "none";
}
else {
document.getElementsByClassName("add-new-expense")[0].style.display = "block";
}
}
Hi @NeetikaGoel
- The add expenses page function is not defined before it is use in html code , do define it and also link in js .
- Properly define the css file location.
Do make the changes and let us know if it helps , otherwise i will share you the whole Complete corrected code.
Hello!
I am getting the same error again.
Please, if possible, share the corrected code.
Also, after I give the certificate exam, will I be able to access the training lectures and content or not?
Hi, it can help you. Do check and let me know if it works.
1 Like
Hi @NeetikaGoel Yes you can access the training even after the exam , with purchase you get lifetime access.
1 Like