In this post, you will learn how to create a monthly expenses calculator with HTML CSS, and JavaScript skills.
What is an expenses calculator?
Managing expenses in today's busy life is tough. The expenses calculator calculates your monthly expenses and helps you to make the budget. The expenses calculator also helps you to find where your money goes so you can control your unnecessary expenses.
Skills used:-
- HTML form and input fields.
- CSS grid layout. Media query to make a responsive expenses calculator.
- JavaScript arithmetic & relational operators and Dom method and conditional statements for input fields validation.
Before designing, let’s discuss the expenses calculator and how all expenses are categorized.
Every month you have to require to plan for the budget or at the end of the month all expenses are calculated. The expenses calculator shows where your money going, how much money you have saved, etc...
Working of expenses calculator using HTML CSS and JavaScript
In this calculator mostly all key expenses are involved. Users have to enter incomes, months, and expenses. When the user mouse over on the total expenses field total of expenses is displayed. The last field shows you savings of a specified month.
 |
| Expenses calculator using HTML CSS and JavaScript |
Explanation of expenses fields in the expenses calculator
Month:-
In the month field, you have to enter the month in which expenses are calculated.
Main income:- The main income includes your main source of income like a full-time job or business.
Extra income:-
It includes income from your secondary sources like a part-time job or any other.
Groceries:- It includes fruits and vegetables, dairy products, non-veg food, bakery items, other types of foods, household items, and personal care products expenses.
Television and mobile recharge:-
Includes monthly recharge amount.
Gas bill/bottle payment:-
Includes payment of a gas bill or gas bottle. (what you used)
Servant payment:-
Pay amount decided for the servant.
Educational expenses:-
Educational expenses include all educational expenses like school and tuition fees, uniforms, school transportation, and stationary expenses.
Insurance amount:-
Includes insurance like health, and family insurance.
Rent:-
Includes payment you have to pay for a rental property like a house, shop, etc...
Home and vehicle loan:-
Includes monthly payable loan amount.
Fuel and Travel expenses:-
Monthly expenses of fuel and Travel.
Medical expenses:-
It includes expenses related to medicines, hospitalization bills, etc...
Clothing & footwear:-
Expenses related to clothes or footwear.
Others:-
This field includes the rest of the expenses which is not fit in a specified list of expenses.
Source code of expenses calculator
HTML:-
<!DOCTYPE html> <html> <head> <title>Expenses calculator</title> <link rel="stylesheet" href="exp_calc.css"> <script src="exp_calc.js"></script> </head> <body> <div class="main"> <div class="heading"> <h1>Expenses Calculator</h1> </div> <form name="expense" action="#"> <label id="mon">Enter month:*</label> <input type="month" name="month"/> <label class="exp">Enter your income:*</label> <label class="rs">₹</label> <input type="number" name="maininc"/> <label class="exp">Extra income:</label> <label class="rs">₹</label> <input type="number" name="extrainc" /> <h2>Expenses</h2> <label class="exp">Groceries:*</label> <label class="rs">₹</label> <input type="number" name="groc" /> <label class="exp">Paperbill:</label> <label class="rs">₹</label> <input type="number" name="paper" /> <label class="exp">Television bill/recharge:</label> <label class="rs">₹</label> <input type="number" name="tvbill" /> <label class="exp">Mobile recharge:</label> <label class="rs">₹</label> <input type="number" name="mobrech" /> <label class="exp">Gas bill/bottle paymet:</label> <label class="rs">₹</label> <input type="number" name="gasbill" /> <label class="exp">Servant payment:</label> <label class="rs">₹</label> <input type="number" name="serventpay" /> <label class="exp">Educational expenses:</label> <label class="rs">₹</label> <input type="number" name="eduexp" /> <label class="exp">Insurance amount:</label> <label class="rs">₹</label> <input type="number" name="insamt" /> <label class="exp">Rent (if any):</label> <label class="rs">₹</label> <input type="number" name="rent" /> <label class="exp">Home loan:</label> <label class="rs">₹</label> <input type="number" name="homeln" /> <label class="exp">Vehicle loan:</label> <label class="rs">₹</label> <input type="number" name="vehicleln" /> <label class="exp">Fuel expense:</label> <label class="rs">₹</label> <input type="number" name="fuel" /> <label class="exp">Travel expense:</label> <label class="rs">₹</label> <input type="number" name="travel" /> <label class="exp">Medical expenses:</label> <label class="rs">₹</label> <input type="number" name="medexp" /> <label class="exp">Clothing & footware:</label> <label class="rs">₹</label> <input type="number" name="clothfoot" /> <label class="exp">Other Expenses:</label> <label class="rs">₹</label> <input type="number" name="other" /> <h2>Total monthly expenses</h2> <label class="exp">Total expenses:</label> <label class="rs">₹</label> <input type="number" name="tot" onmouseover="tot_exp()" readonly/> <h2>Your savings for this month</h2> <label class="exp">You have saved</label> <label class="rs">₹</label> <input type="number" name="savmon" onmouseover="saved_money()" readonly/> </form> </body> </html>
CSS:-
h1,h2,.exp,#mon{ font-family:Georgia, "Times New Roman", Times, serif; } form { display:grid; max-width:400px; padding:20px; grid-template-columns:210px 30px 150px; grid-gap:5px; margin-left:35%; background-color:#2e2c53; border:5px inset #2e2cff; border-radius:0px 0px 20px 20px; box-shadow:5px -5px 15px #2e2c33; } .exp,#mon { grid-column:1/2; color:#f7ce74; font-size:18px; } input { grid-column:3/4; border:none; background-color:transparent; border-bottom:5px ridge #cb3161; outline:none; color:#f2f2f2; font-family:"Arial Rounded MT Bold"; font-size:16px; } .rs { grid-column:2/3; } h1 { margin-left:35%; background-color:#cb3161; max-width:430px; text-align:center; padding:4px; border:5px outset #cb3100; border-radius:20px 20px 0px 0px; box-shadow:5px 5px 15px #cb3155; color:#2e2c53; } h2 { grid-column:1/4; text-align:justify; color:#fc6b21; } @media (max-width:600px) { form { margin-left:0; grid-column-gap:0; grid-template-columns:auto auto auto; } input { max-width:150px; } h1 { margin-left:0; } }
JavaScript:-
var total_exp; var mon; var main_income; var extra; function tot_exp() { mon=document.forms["expense"]["month"].value; main_income=document.forms["expense"]["maininc"].value; extra=document.forms["expense"]["extrainc"].value; var grocery=document.forms["expense"]["groc"].value; var paper_exp=document.forms["expense"]["paper"].value; var tv_exp=document.forms["expense"]["tvbill"].value; var mob_exp=document.forms["expense"]["mobrech"].value; var gas_exp=document.forms["expense"]["gasbill"].value; var serv_sal=document.forms["expense"]["serventpay"].value; var education=document.forms["expense"]["eduexp"].value; var insurance=document.forms["expense"]["insamt"].value; var rent_exp=document.forms["expense"]["rent"].value; var home_loan=document.forms["expense"]["homeln"].value; var vehcl_loan=document.forms["expense"]["vehicleln"].value; var fuel_exp=document.forms["expense"]["fuel"].value; var travel_exp=document.forms["expense"]["travel"].value; var medical_exp=document.forms["expense"]["medexp"].value; var wearing=document.forms["expense"]["clothfoot"].value; var other_exp=document.forms["expense"]["other"].value; if(mon=="") { alert("please select month."); } else if(main_income=="" || grocery=="") { alert("It is compalsory to fill main income and groceries fields to calculate total expenses and saved money"); } else { total_exp=+grocery + +paper_exp + +tv_exp + +mob_exp + +gas_exp + +serv_sal + +education + +insurance + +rent_exp + +home_loan + +vehcl_loan + +fuel_exp + +travel_exp + +medical_exp + +wearing + +other_exp; document.forms["expense"]["tot"].value=total_exp; } } function saved_money() { tot_exp(); var income=main_income; var part_time=extra; var total=total_exp; var saved=+income + +part_time - total; document.forms["expense"]["savmon"].value=saved; }
Explanation of JavaScript code
Two functions are created one calculates the total of all expenses and the second calculates saving money for a specified month. The variables tot_exp, mon, main_income, and extra are defined as global variables because they are used in both functions.
The tot_exp() function invoked in the saved_money() function to work the saved_money() function properly.
Output for empty fields of expenses calculator:-
Final Output of expenses calculator:-
Summary
In this post, we designed an expenses calculator using a grid layout and little help from JavaScript. The expenses calculator is the best project for those who are a beginner in JavaScript.
When you do not fill up the month, main_income, and groceries fields, no calculation will perform. So in this calculator above mentioned fields are mandatory and are also highlighted with *.
Other expenses fields are optional because every person's requirements are different. for example, some people do not have vehicles so they do not require any vehicle insurance or fuel expense.
0 Comments