BYU Student Author: @Nate
Reviewers: @Donovon, @Mark
Estimated Time to Solve: 20 Minutes
We provide the solution to this challenge using:
- JavaScript
- HTML
Need a program? Click here.
Note
To complete this challenge, you should have an appropriate IDE installed on your computer. We recommend installing Microsoft’s Visual Studio Code, equipped with the Live Server extension. Download VS Code here.
Overview
Congrats! You’ve just started your internship with TechHub Consultants, a consulting firm that helps small businesses in Utah Valley manage their finances.
The company has been building a simple online tool to add to its online client portal. This tool will allow clients to input select financial data and press a button to quickly display their Return on Equity and DuPont decomposition.
A senior on your project team has sent you an HTML file called index.html that contains a prototypical template for the online tool. When clients click the Calculate Decomposition button, the tool should populate the proper ratios under the headers at the bottom of the page.
However, when you inspect the HTML file, you notice that there’s a reference to a JavaScript file called app.js that does not exist (see the <script> tag in index.html). Your team has asked you to create the app.js file to add the needed functionality to the HTML button.
Instructions
Write a JavaScript function called calculateDecomposition that will to extract the financial data (sales revenue, net income, total assets, and total equity) from the text inputs in the index.html file based on element ID, then use those values to calculate each part of the DuPont framework (profit margin, asset turnover, financial leverage, and return on equity).
The function should then output the calculated ratios, rounded to two decimals, into the proper rows of the table in index.html based on element ID.
Suggestions and Hints: Getting Started
First, you should create a new JavaScript file called app.js saved into the same directory as index.html. This will allow the HTML tool to call the script saved in that file.
Open the folder containing both files in VS Code. Then, open the index.html file in the editor window. To view a web display of the file using VS Code, install the Live Server extension, then click Go Live on the right of the bottom ribbon.
To edit the app.js file, open it in the editor window as well.
Suggestions and Hints: Using AI
As an intern you might not be familiar with JavaScript, but you can get a great start with ChatGPT or a similar AI program. Just give the program some instructions of what you need.
If you use AI, you will likely need to change the element IDs to match those given in index.html.
Suggestions and Hints: Referencing HTML
To get financial values from text entry elements, use:
*value* = document.getElementById(*ID*).value
To post ratio values into the correct table field, use:
document.getElementById(*ID*).textContent = *ratio*
Suggestions and Hints: Ratios
The DuPont decomposition formula is:
ROE = (Net Profit Margin) x (Asset Turnover) x (Financial Leverage)
Where:
Net Profit Margin = Net Income / Revenue
Asset Turnover = Revenue / Average Total Assets
Financial Leverage = Average Total Assets / Average Shareholders’ Equity
Bonus Points
If you design your function to correctly handle the inclusion of dollar signs or commas in the html text inputs, your team will be so impressed they will give you a $1/hour raise!
Data Files
Check Figures
Inputting the following numbers and pressing the Calculate Decomposition button should return the ratios given below:
Revenue: $13,017,000
Net Income: $5,917,000
Total Assets: $43,531,000
Total Equity: $27,033,500
ROE: 0.22
Profit Margin: 0.45
Asset Turnover: 0.30
Financial Leverage: 1.61
Solution
Solution Code
function calculateDecomposition()
{
function getData(name)
{
var data = document.getElementById(name).value;
data = data.replace("$","").replace(/,/g,"");
return data;
}
function postData(name,data)
{
data = data.toFixed(2)
document.getElementById(name).textContent = data;
}
var salesRevenue = getData("sales-revenue");
var netIncome = getData("net-income");
var totalAssets = getData("total-assets");
var totalEquity = getData("total-equity");
var returnOnEquity = netIncome / totalEquity;
var profitMargin = netIncome / salesRevenue;
var assetTurnover = salesRevenue / totalAssets;
var financialLeverage = totalAssets / totalEquity;
postData("return-on-equity",returnOnEquity);
postData("profit-margin",profitMargin);
postData("asset-turnover",assetTurnover);
postData("financial-leverage",financialLeverage);
} Challenge39_app.js
Solution Video: Challenge 39|JAVASCRIPT – Decoding DuPont