39|JAVASCRIPT – Decoding DuPont

Challenges
, , , , , , ,
1

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

2

function calculateDecomposition() {

// Get input values
var revenue = parseFloat(document.getElementById(“sales-revenue”).value);
var netIncome = parseFloat(document.getElementById(“net-income”).value);
var totalAssets = parseFloat(document.getElementById(“total-assets”).value);
var totalEquity = parseFloat(document.getElementById(“total-equity”).value);

// Calculate ratios
var returnOnEquity = netIncome / totalEquity;
var profitMargin = netIncome / revenue;
var assetTurnover = revenue / totalAssets;
var financialLeverage = totalAssets / totalEquity;

// Round to 2 decimal places
returnOnEquity = returnOnEquity.toFixed(2);
profitMargin = profitMargin.toFixed(2);
assetTurnover = assetTurnover.toFixed(2);
financialLeverage = financialLeverage.toFixed(2);

// Display back to HTML
document.getElementById(“return-on-equity”).innerHTML = returnOnEquity;
document.getElementById(“profit-margin”).innerHTML = profitMargin;
document.getElementById(“asset-turnover”).innerHTML = assetTurnover;
document.getElementById(“financial-leverage”).innerHTML = financialLeverage;

}

3

function calculateDecomposition()
{
function getData(name)
{
let 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;
}

let salesRevenue = getData("sales-revenue");
let netIncome = getData("net-income");
let totalAssets = getData("total-assets");
let totalEquity = getData("total-equity");

let returnOnEquity = netIncome / totalEquity;
let profitMargin = netIncome / salesRevenue;
let assetTurnover = salesRevenue / totalAssets;
let financialLeverage = totalAssets / totalEquity;

document.getElementById(“return-on-equity”).innerHTML = returnOnEquity;
document.getElementById(“profit-margin”).innerHTML = profitMargin;
document.getElementById(“asset-turnover”).innerHTML = assetTurnover;
document.getElementById(“financial-leverage”).innerHTML = financialLeverage
};

4

var rev = parseFloat(document.getElementById(“sales-revenue”).value)

var NI = parseFloat(document.getElementById(“net-income”).value)

var TA = parseFloat(document.getElementById(“total-assets”).value)

var TE = parseFloat(document.getElementById(“total-equity”).value)

var ROE = (NI/TE).toFixed(2)

var PM = (NI/rev).toFixed(2)

var AT = (rev/TA).toFixed(2)

var FinLev = (TA/TE).toFixed(2)

document.getElementById(“return-on-equity”).innerHTML=ROE

document.getElementById(“profit-margin”).innerHTML=PM

document.getElementById(“asset-turnover”).innerHTML=AT

document.getElementById(“financial-leverage”).innerHTML=FinLev

5

Time spent: 1h20
Difficulty: intermediate
Comment: For some reason, it took me so much time to understand how to implement javascript into my VS code. I installed the javascript extension, downloaded the node.js on my laptop. When I pasted the code given by chatgpt into the app.js file the index HTML would still not work. I spent 1h yesterday trying to make it work even by copying the codes from the previous replies but still would not make it work. I spent another 20 min today and added the live server extension and it finally worked. It’s probably just because I didn’t download the server yesterday, and for sure would have taken me less time. In the end, I was glad it finally worked. Here is the code chatgpt gave me:

function calculateDecomposition() {
// Retrieve values from input fields
const salesRevenue = parseFloat(document.getElementById(“sales-revenue”).value.trim());
const netIncome = parseFloat(document.getElementById(“net-income”).value.trim());
const totalAssets = parseFloat(document.getElementById(“total-assets”).value.trim());
const totalEquity = parseFloat(document.getElementById(“total-equity”).value.trim());

// Validate inputs
if (isNaN(salesRevenue) || isNaN(netIncome) || isNaN(totalAssets) || isNaN(totalEquity)) {
    alert("All fields must have valid numerical values. Please check your inputs.");
    return;
}

// Calculate ratios
const profitMargin = (netIncome / salesRevenue).toFixed(2);
const assetTurnover = (salesRevenue / totalAssets).toFixed(2);
const financialLeverage = (totalAssets / totalEquity).toFixed(2);
const returnOnEquity = (profitMargin * assetTurnover * financialLeverage).toFixed(2);

// Display the results
document.getElementById("return-on-equity").innerText = returnOnEquity;
document.getElementById("profit-margin").innerText = profitMargin;
document.getElementById("asset-turnover").innerText = assetTurnover;
document.getElementById("financial-leverage").innerText = financialLeverage;

}

6

Time to complete: 30 minutes
Rating: intermediate
It took me some time to figure it out since I had never worked with JavaScript or created a function before. However, with the help of ChatGPT, I was able to find a solution. By combining suggestions from ChatGPT, using the “Inspect” tool to check the HTML code, and getting guidance on using the correct variables, I was able to make it work successfully.
function calculateDecomposition() {
// Extract financial data from input fields
const salesRevenue = parseFloat(document.getElementById(“sales-revenue”).value) || 0;
const netIncome = parseFloat(document.getElementById(“net-income”).value) || 0;
const totalAssets = parseFloat(document.getElementById(“total-assets”).value) || 0;
const totalEquity = parseFloat(document.getElementById(“total-equity”).value) || 0;

// Validate inputs
if (salesRevenue === 0 || totalAssets === 0 || totalEquity === 0) {
    alert("Please ensure all financial values are entered and greater than zero.");
    return;
}

// Calculate DuPont framework components
const profitMargin = netIncome / salesRevenue; // Profit margin
const assetTurnover = salesRevenue / totalAssets; // Asset turnover
const financialLeverage = totalAssets / totalEquity; // Financial leverage
const returnOnEquity = profitMargin * assetTurnover * financialLeverage; // Return on equity

// Round values to two decimals
const roundedProfitMargin = (profitMargin * 100).toFixed(2); // Convert to percentage
const roundedAssetTurnover = assetTurnover.toFixed(2);
const roundedFinancialLeverage = financialLeverage.toFixed(2);
const roundedROE = (returnOnEquity * 100).toFixed(2); // Convert to percentage

// Output results into the table
document.getElementById("return-on-equity").innerText = `${roundedROE}%`;
document.getElementById("profit-margin").innerText = `${roundedProfitMargin}%`;
document.getElementById("asset-turnover").innerText = roundedAssetTurnover;
document.getElementById("financial-leverage").innerText = roundedFinancialLeverage;

}

Blockquote