Javascript project help pls

JavaScript
1

i have created a budget manager app using html,css and javascript.I have dynamically added display cart using .createElement to show the expense data.How can i clear the data in the dynamically added cart,for displaying data for a new month.,on clicking the submit monthly expense button.Pls guide me…

<script>
function budget(){
const mm=document.getElementById("dropmonth");

let token=0;
let balance=0;
const monthly=document.getElementById("monthly");
const btn=document.getElementById("submit");

btn.addEventListener("click",function(){
  let expense=document.getElementById("exp").value;
  let budget=document.getElementById("budget").value;
  if(expense<budget)
  {
     balance=budget-expense;
  }
  else if(expense>budget){
     balance=budget-expense;
  }
  else if(expense=budget){
  	  balance=0;
  }
  
    const expname=document.getElementById("expName").value;
 
const totalline=document.getElementById("total");
 const week=document.createElement("div");

  week.id="newdiv";
 week.classList.add("weekclass");
 week.innerHTML=`
	<span>${expname}</span>
	<span class="exptot">${expense}</span>
	<span class="budtot">${budget}</span>
	<span class="baltot">${balance}</span>
	
`;
document.getElementById("exp").value="";
         document.getElementById("budget").value="";
        document.getElementById("expName").value="";
		
       	
/*
const g=document.getElementById("newdiv");
const p=document.getElementById("new");
p.appendChild(g);
*/
if(expense!=""){
 monthly.insertBefore(week,totalline);
 }
 
  document.getElementById("balance").textContent=balance;
 //show exp total
 
 const total=document.querySelectorAll(".exptot").textContent;
  const totalexp=[];
 
  	 
	 
  
		const money=document.querySelectorAll(".exptot");
		
		money.forEach(function(mitem){
			totalexp.push(parseFloat(mitem.textContent));
		});
		const theTotal=totalexp.reduce(function(totalexp,m){
		  totalexp +=m;
		  
		  return totalexp;
		});
		const t1=document.getElementById("expTotal");
		t1.textContent=theTotal;

		//show budgetTotal
		const total1=document.querySelectorAll(".budtot").textContent;
  const totalexp1=[];
		const money1=document.querySelectorAll(".budtot");
		
		money1.forEach(function(mitem){
			totalexp1.push(parseFloat(mitem.textContent));
		});
		const btotal=totalexp1.reduce(function(totalexp1,m){
		  totalexp1 +=m;
		  
		  return totalexp1;
		});
		const s1=document.getElementById("budgetTotal");
		s1.textContent=btotal;
		//show balance total
		const total2=document.querySelectorAll(".baltot").textContent;
  const totalexp2=[];
		const money2=document.querySelectorAll(".baltot");
		
		money2.forEach(function(mitem){
			totalexp2.push(parseFloat(mitem.textContent));
		});
		const baltotal=totalexp2.reduce(function(totalexp2,m){
		  totalexp2 +=m;
		  
		  return totalexp2;
		});
		const v1=document.getElementById("balanceTotal");
		v1.textContent=baltotal;
		monthly.classList.add("show-cart");
	  balance="";
	     
 
});
const c=document.getElementById("close");
c.addEventListener("click",function(){
	const m=document.getElementById("monthly");
	m.classList.remove("show-cart");
	document.getElementById("balance").textContent="";
	/*const bt=document.getElementById("submit");
	bt.disabled=true;*/
});
}
/*const msubmit=document.getElementById("msubmit");
msubmit.addEventListener("click",report());
function report(){
	const msubmit=document.getElementById("msubmit");
	const monthly=document.getElementById("monthly");
  const t=document.getElementById("total");
 msubmit.addEventListener("click",function a(){ 
 if(confirm('You cannot make any further changes.Do you want to continue..?'))
	{
	/*const totalline=document.getElementById("total");
     let x=document.getElementById("newdiv");
    x.innerHTML=`<span></span>
	<span class="exptot"></span>
	<span class="budtot"></span>
	<span class="baltot"></span>
`;

    let x=document.getElementById("newdiv");

	
	 alert("Your monthly budget is submitted.Please select the next month to continue..");
	 token=1;
	 //monthly.classList.remove("show-cart",a);
	//const btn=document.getElementById("submit");
	//btn.disabled=true;
	
	var t=document.querySelectorAll(".weekclass");
	//t.innerHTML=``;
	//monthly.classList.remove("weekclass");
	monthly.clear();
	monthly.classList.remove("show-cart");
	}
 });}
*/ 

</script>

<script>
function run(){
 //select month from dropdownlist
const e=document.getElementById("ddlmonth");
const m=document.getElementById("dropmonth");
var selected=e.options[e.selectedIndex].text;
m.textContent=selected;
const btn=document.getElementById("submit");
	btn.disabled=false;
console.log(selected);
//
}
</script>
</head>
<body onload="budget();">
<header>
<img src="images/logo.jpg" alt="logo" id="logo">
Budget Manager
</header>
<div id="monthly"class="monthly">
<div>
<h4 style="text-align:center;padding-top:30px">Budget Analysis <strong><span id="dropmonth" style="color:rgb(54, 103, 180)"></span></strong></h4>
<table id="new">
<tr >
   <th>Week</th>
   <th>Budget</th>
   <th>Expense</th>
   <th>Balance</th>
</tr></table></div>
<div id="total">
  <table id="no">
  <tr>
  <td><span id="h">Total</span></td>
  <td><span id="expTotal">0</span></td>
   <td><span id="budgetTotal">0</span></td>
   <td><span id="balanceTotal">0</span></td>
  </tr> 
</table>
</div>
<div id="final-submit">
<input type="submit" id="close" class="btn btn-primary" value="Close">
<input type="submit" id="msubmit" class="btn btn-primary" value="Submit monthly expense" ></div>
</div>
<div id="main" class="well well-lg">
<div id="left">
<select id="ddlmonth" class="form-control" onchange="run();">
<option selected="selected" disabled="disabled">Select an month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<label for="exp"><h3>Enter your expense</h3></label>
<input type="text" id="exp" class="form-control" placeholder="Dhm">
<label for="expName"><h3>Enter your expense name</h3></label>
<input type="text" id="expName" class="form-control" placeholder="Expense name">
<br>
<br>
<input type="submit" id="submit" value="Add Expense" class="btn btn-primary" disabled>
</div>
<div id="right">
<label for="budget"><h3>Enter your budget amount</h3></label>
<input type="text" id="budget" class="form-control" placeholder="Dhm">
<label for="file1"><h3>Upload your bill</h3></label>
<input type="file" id="file1" class="form-control">
<label for="balance"><h3>Your balance amount</h3></label>
<br>
<span id="balance" style="color:rgb(249, 161, 0);font-size:30px"></span><span style="color:#258725;font-size:20px">Dhms </span>
</div>
</div>
<section>
<br>
<br>
<h2 style="text-align:center;">Track your expenses here..</h2>
<br>
<br>
<div>
<table>
<tr>
   <th>Month</th>
   <th>Budget</th>
   <th>Expense</th>
   <th>Balance</th>
</tr>
<tr>
   <td>January</td>
   <td>1000</td>
   <td>989</td>
   <td>11</td>
</tr>
<tr>
   <td>January</td>
   <td>1000</td>
   <td>989</td>
   <td>11</td>
</tr>
<tr>
   <td>January</td>
   <td>1000</td>
   <td>989</td>
   <td>11</td>
</tr>
<tr>
   <td>January</td>
   <td>1000</td>
   <td>989</td>
   <td>11</td>
</tr>
<tr>
   <td>January</td>
   <td>1000</td>
   <td>989</td>
   <td>11</td>
</tr>
<tr>
   <td>January</td>
   <td>1000</td>
   <td>989</td>
   <td>11</td>
</tr>
<table>
</div>
</section>

</body>
</html>

My css

body{
	background-color:rgb(185, 215, 200);
	display:grid;
	grid-template-columns:1fr;
	grid-template-rows:1fr auto 2fr;
	grid-template-areas:"h"
	                    "m"
						"s";

}
#main{
	width:80%;
	margin:0 auto;
	display:flex;
	flex-direction:horizontal;
	justify-content:space-evenly;
	grid-area:"m";
}
header{
    font-size:40px;
	grid-area:"h";
}
section{
	grid-area:"s";
}
#logo{
  height:100px;
 
}
#monthly-submit:hover,#submit:hover{
 font-size:110%;
}
.monthly{
	position:absolute;
	top:0;
	right:0;
	width:0;
	min-height:300px;
	background-color:light green;
	overflow:hidden;
	transition:all 0.3s ease-in-out;
	box-shadow:0 19px 25px rgb(0,0,0,0.2);
}
.show-cart{
    margin-top:50px;
	width:380px;
	height:auto;
	background-color:rgb(219, 247, 235);
	opacity:0.9;
	transform:rotateY(-360deg);
	border:1px solid black;
	border-radius:8px;
}
.weekclass{
	transition:all 0.2s ease-in-out;
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	padding-top:20px;
}
#no{
	
	margin-top:35px;
	border:0;
	width:100%;
}
#no td{
	border-top:1px solid rgb(95, 190, 142);
	
}
#msubmit{
    margin-top:50px;
	margin-left:115px;
	margin-bottom:30px;
}
#ddlmonth{
	width:150px;
}
table{
    margin:0 auto;
	border:2px solid rgb(95, 190, 142);
	width:70%;
	padding:40px;
	text-align:center;
	padding:20px;
	
}
table th{
	text-align:center;
	padding:20px;
	background-color:rgb(95, 190, 142);
}
table td{
	border-bottom:1px solid rgb(95, 190, 142);
	border-width:90%;
}
2

How can i clear the data in the dynamically added cart,for displaying data for a new month.,on clicking the submit monthly expense button.

You can listen for a click event on submit button and run a function. If you want to clear UI elements, simply giving your DOM reference .innerHTML = “”; will do. If you want to clear data in your model (your state), simply assign it to an empty array. (Assuming list of items for your cart is in an array).

1 Like
3

@shimphillip: thanks for your help…i figured it out :slight_smile: