Introduction

By taking this project tutorial, you will learn how to use javascript classes to make a basic accounting calculator without implementing complicated and incoherent methods offered by other languages.


Tags

Share

Basic Accounting Formulas Calculator in JavaScript Classes

Advertisement:


read_later

Read Later



read_later

Read Later

Introduction

By taking this project tutorial, you will learn how to use javascript classes to make a basic accounting calculator without implementing complicated and incoherent methods offered by other languages.

Tags

Share





Advertisement

Advertisement




Introduction

In this project, I programmed a javascript class named Accounting in order to calculate seven basic accounting formulas by which you can find the equity, net income, break-even volume, cash ratio, profit margin, debt to equity ratio and the last but not least cost of goods. JavasScript classes are the best way to collect related functions and objects in regards to their groups so that I used a javascript class to collect all basic accounting formulas under one main object named Formulas, which is well-explained on the source code below. Also, I created static functions to sort and dump input variables from the form to an array. By taking this project tutorial, you will learn how to use javascript classes to make a basic accounting calculator without implementing complicated and incoherent methods offered by other languages.

For more information about the code files, please visit Source Code section below.

Demonstration


Accounting Class and Formulas Object

After defining the Accounting class, I used the constructor method to get variables externally – you can find more information about the subject on Articles. Under the constructor, then I created an object to store accounting formulas which you can see on the source code, named Formulas. Just use “this” to define a variable – which can be an object, a function or a variable – under the class and braces to define that variable as an object; you can add either functions or variables in objects by using a colon. In this case, I added all accounting formulas under the Formulas object.

project-image
Figure - 23.1

Sorting and Dumping Form Inputs

To access a function in a javascript only from outside, you have to use the static method. I defined three of them which you can inspect on the source code or the figure below. The static title function displays the company name, id number, and current value for each new company. I choose to get input variables by using the querySelectorAll() property hence the need for sorting and dumping variables to an array.Firstly, GET_VARIABLES function gets the input value by using the value property(.value) for each input element and attach them to a dump array named variables. Then, for each variables value, DEFINE_VARIABLES function detects whether the item is a number or not to attach it to a new array named values; if the item is null or not a number, it saves zero[0]. I used the forEach() method to sort the variables array as the values array - variables.forEach(Accounting.DEFINE_VARIABLES);. You can access static functions like this – className.staticFunctionname();.

project-image
Figure - 23.2

Printing Accounting Variables as Output

After sorting and dumping input element values, I created a new object by using the Accounting class along with values array variables as depicted below, named company. As you can see on the source code below, I reached the title static function to print the predefined company name, id number, and current value. Although I could use more HTML elements to show the output, I decided to use one paragraph to display accounting variables come from the functions defined in the Formulas object. To get each function under an object in a class, use this simple syntax(objectName.classObject.functionName()) - company.Formulas.Equity();.

project-image
Figure - 23.3

Designing Account Div

I only created a form including input elements and their labels for accounting variables to be entered. You can find the color palette I used for the theme and get more information about the design on the source code down below. It is an open source project and therefore you can either re-design or improve my code according to your project syntax.

project-image-slide project-image-slide project-image-slide
Slide


project-image
Figure - 23.4

Mobile Version

I used @media tag to make changes pertained to screen sizes especially under 800px width.

project-image
Figure - 23.5

Source Code

Please sign in to download source code files below as zip folder, including index.html, accounting.css and icon.

Zip Folder

Download


index.html

Download



<!DOCTYPE html>
<html>
<head>
<title>Accounting Formulas Calculator</title>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- link to icon -->
<link rel="icon" type="image/png" sizes="128x128" href="icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="icon.png">

<!-- link to accounting.css file -->
<link rel="stylesheet" type="text/css" href="accounting.css">

<!-- link to FontAwesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">  
</head>
<body>
<div class="Account">
<h1>Accounting Formulas Calculator</h1>
<form>
<label>Assets: </label><input type="text"></input><br><br>
<label>Liability: </label><input type="text"></input><br><br>
<label>Revenues: </label><input type="text"></input><br><br>
<label>Expenses: </label><input type="text"></input><br><br>
<label>Fixed Costs: </label><input type="text"></input><br><br>
<label>Sales Price: </label><input type="text"></input><br><br>
<label>Cost Per Unit: </label><input type="text"></input><br><br>
<label>Cash: </label><input type="text"></input><br><br>
<label>Current Liabilities: </label><input type="text"></input><br><br>
<label>Sales: </label><input type="text"></input><br><br>
<label>Inventory: </label><input type="text"></input><br><br>
<label>Cost of Outputs: </label><input type="text"></input><br><br>
</form>
<p id="OUTPUT"></p>
<button onclick="Print_Accounting_Variables();">Calculate</button>
<br><br>
</div>

<!-- Get the Accounting class from accounting.js file -->
<script type="text/javascript" src="accounting.js"></script>

</body>
</html>


accounting.js

Download



class Accounting {
	
constructor(Assets, Liability, Revenues, Expenses, Fixed_Costs, Sales_Price, Cost_Per_Unit, Cash, Current_Liabilities, Sales, Inventory, Cost_of_Outputs) {
	this.Formulas = {
		equity: Assets - Liability,
		Equity: function(){ return this.equity; },
		
		Net: Revenues - Expenses,
	    Net_Income: function(){ return this.Net; },
		
		Break_Even_Volume: function(){ return Fixed_Costs / (Sales_Price - Cost_Per_Unit);  },
		
		Cash_Ratio: function(){ return Cash / Current_Liabilities; },
		
		Profit_Margin: function(){ return this.Net / Sales; },
		
		Debt_to_Equity_Ratio: function(){ return Liability / this.equity; },
		
		Cost_of_Goods: function(){ return Inventory - Cost_of_Outputs; }
	};
}

static title(name, id, value){
	return "<span>Company Name: " + name + "<br>Company ID: " + id + "<br>Company Current Value: " + value + "</span>";
}

static GET_VARIABLES(array, dumpArray){
	for(var i=0;i<array.length;i++){
		dumpArray[i] = array[i].value;
	}
}

static DEFINE_VARIABLES(item, index){
    if(isNaN(Number(item)) || item==""){ values[index] = 0; }
	else{ values[index] = item; }
}


}

var input = document.getElementsByClassName("Account")[0].querySelectorAll("input");
var variables = [];
var values = [];
var OUTPUT = document.getElementById("OUTPUT");


function Print_Accounting_Variables(){
	Accounting.GET_VARIABLES(input, variables);
	
	variables.forEach(Accounting.DEFINE_VARIABLES);
 	
    var company = new Accounting(values[0], values[1], values[2], values[3], values[4], values[5], values[6], values[7], values[8], values[9], values[10], values[11]);
	
	OUTPUT.innerHTML = Accounting.title("KEYBOARD", 12568412, "15M+");
	OUTPUT.innerHTML += "<br><br>Equity = " + company.Formulas.Equity();
	OUTPUT.innerHTML += "<br><br>Net Income = " + company.Formulas.Net_Income();
	OUTPUT.innerHTML += "<br><br>Break-Even Volume = " + company.Formulas.Break_Even_Volume();
	OUTPUT.innerHTML += "<br><br>Cash Ratio = " + company.Formulas.Cash_Ratio();
	OUTPUT.innerHTML += "<br><br>Profit Margin = " + company.Formulas.Profit_Margin();
	OUTPUT.innerHTML += "<br><br>Debt to Equity Ratio = " + company.Formulas.Debt_to_Equity_Ratio();
	OUTPUT.innerHTML += "<br><br>Cost of Goods = " + company.Formulas.Cost_of_Goods();
}



accounting.css

Download



html{background-color:#2e3033;}

.Account{position:relative;width:80%;height:auto;margin:auto;background-color:#ee7762;color:white;border:2px solid white;border-radius:20px;}
.Account h1{text-align:center;}
.Account form{text-align:right;}
.Account input{width:50%;}
.Account label{font-weight:bold;font-size:20px;}
.Account p{font-weight:bold;font-size:25px;color:#f3d060;}
.Account button{display:block;width:70%;margin:auto;background-color:#f3d060;border:1px solid slategrey;border-radius:20px;color:slategrey;font-weight:bold;font-size:20px;cursor:pointer;}
.Account button:hover{background-color:slategrey;color:#f3d060;border-color:#f3d060;transition:1s;}
.Account span{color:slategrey;text-decoration:underline;}

@media only screen and (max-width: 800px) {
	.Account h1{font-size:7vw;}
	.Account label{font-size:3vw;}
    .Account p{font-size:5vw;}
	
}