Calculating Costs

Introduction

Now that we’ve validated the information coming through from the user, we can start calculating the costs for the customer.

We’ll create a function that will take the user’s input, calculate the final costs for the customer and then return an object that packages all this information together.

Creating a new function

Let’s start by creating a new function called calculateCosts that will take the user’s input as an argument.

1. We will follow the same approach as before, and create a new JavaScript module (file) called calculateCosts.js to split our data into small, manageable chunks.

   

2. Inside this new file, add the code shown below:

   calculateCosts.js

   export function calculateCosts(data) {
     console.log('Calculating costs...');
     console.log({ data });
   }

   Note

   We’ve added the console.log() statements just to confirm that our function is being called correctly.

3. Now, we need to import this function into our main index.js file and call it with the user’s input.

   Challenge

   Code Challenge - import and call calculateCosts

   Open index.js.

   1. Can you import the calculateCosts function into your index.js file?

   2. Can you call calculateCosts with the result object that is returned from our validateForm() function, but only if this data is valid?

   TIPS:

   • Think about the value that result is if the form data is invalid. What is this?
   • How could you use the value of result in an if statement to only call calculateCosts if the form data is valid?

   If everything works correctly, you should see the following in your browser console:

   • if the data is valid, you should see the message Calculating costs... and the data value in your broswer console
   • if the data is invalid, you should only see the value of result in your console

   

   Solution

   Add the code highlighted below to your index.js file:

   index.js

   import { calculateCosts } from "./calculateCosts.js";
   import { validateForm } from "./validateForm.js";
   
   // Capture user's input on form submission
   let form = document.querySelector("form");
   
   form.addEventListener("submit", function (event) {
     event.preventDefault();
   
     // Store the user's email address as userEmail (string/text)
     let userEmail = document.querySelector("#email").value;
     // Store the user's level as userLevel (string/text)
     let userLevel = document.querySelector("#level").value;
     // Store the user's hours of study as userHours (number)
     let userHours = parseInt(document.querySelector("#hoursPerWeek").value);
   
     // Validate the user's input
     const result = validateForm({ userEmail, userLevel, userHours });
   
     console.log({ result });
   
     if (result) {
       calculateCosts(result);
     }
   });
   // Calculate the total cost
   // Display the total cost to the user

   Explanation: Truthy and Falsy Values

   If the form data is invalid, the value of result will be false.

   An if statement is used to check if something is true or false.

   If validation fails on the form data, then result will be false and the calculateCosts function will not be called.

   However, if the form data is valid, then result will be an object containing valid form data.

   In JavaScript, an object is considered truthy when considered in a boolean context, such as inbetween the brackets of an if statement.

   if ({}) { // This will evaluate to true
     console.log('This will be logged to the console');
   }

   Therefore, the if statement will evaluate to true and the calculateCosts function will be called.

   See the MDN Web Docs for more information on truthy and falsy values.

   Click to reveal

Calculating Costs

Now that we have our function set up, we can start calculating the costs for the customer.

Challenge

Code Challenge

Inside the calculateCosts function, implement the code that will calculate the total cost for the customer based on the data object values you have access to.

• Basic lessons are £12.25 per hour; advanced lessons are £15.50.
• Use an object to store the following information:
  • The total cost of the lessons.
  • The user’s email address.
  • How many hours the user is studying per week.
  • What level they are studying at (basic or advanced)
• You should return this object from the calculateCosts function.
• You should capture the object that is returned from the calculateCosts function and call it output.
• Finally, console.log the output object.

TIPS:

• The total cost is the cost per hour multiplied by the number of hours the user is studying per week.
• The multiplication operator in JavaScript is *.

Solution

1. Add the code highlighted below to your calculateCosts.js file:

   calculateCosts.js

   export function calculateCosts(data) {
     console.log('Calculating costs...');
     console.log({ data });
   
     const levelCosts = {
       basic: 12.25,
       advanced: 15.5,
     };
   
     let costPerHour = levelCosts[data.userLevel];
     let totalCost = (costPerHour * data.userHours).toFixed(2);
   
     const output = {
       totalCost,
       userEmail: data.userEmail,
       userHours: data.userHours,
       userLevel: data.userLevel,
     };
   
     return output;
   }

   Explanation

   • We’ve created a levelCosts object that stores the cost per hour for basic and advanced level lessons.

     This follows the same design pattern as when we validated the number of hours the user wants to study against their chosen level.

     const levelCosts = {
       basic: 12.25,
       advanced: 15.5,
     };

     It means that, in the future, if more levels are added, we can easily update the cost per hour in one place.

   • We then store the cost per hour for the user’s chosen level in the costPerHour variable.

     let costPerHour = levelCosts[data.userLevel];

   • Using this, we can now calculate the totalCost by multiplying the costPerHour by the number of hours the user wants to study per week.

     However, because this is a currency value, we also use the toFixed() method to round the total cost to two decimal places.

     let totalCost = (costPerHour * data.userHours).toFixed(2);

   • Finally, we create an output object that stores the total cost, the user’s email address, the number of hours they want to study per week, and the level they are studying at.

     const output = {
       totalCost,
       userEmail: data.userEmail,
       userHours: data.userHours,
       userLevel: data.userLevel,
     };

2. Add the code highlighted below to your index.js file:

   index.js

   import { calculateCosts } from "./calculateCosts.js";
   import { validateForm } from "./validateForm.js";
   
   // Capture user's input on form submission
   let form = document.querySelector("form");
   
   form.addEventListener("submit", function (event) {
     event.preventDefault();
   
     // Store the user's email address as userEmail (string/text)
     let userEmail = document.querySelector("#email").value;
     // Store the user's level as userLevel (string/text)
     let userLevel = document.querySelector("#level").value;
     // Store the user's hours of study as userHours (number)
     let userHours = parseInt(document.querySelector("#hoursPerWeek").value);
   
     // Validate the user's input
     const result = validateForm({ userEmail, userLevel, userHours });
   
     console.log({ result });
   
     if (result) {
       // Calculate the total cost
       const output = calculateCosts(result);
       console.log({ output });
     }
   });
   // Calculate the total cost
   // Display the total cost to the user

   Notice that we have also updated the comment plan in the index.js file to reflect the new code.

Click to reveal

Summary

In this guide, we have:

• Created a new function called calculateCosts that takes the user’s input as an argument.
• Stored in this new function in a new JavaScript module (file) called calculateCosts.js to help manage our code.
• Calculated the total cost for the customer based on the user’s input.
• Used the toFixed() method to round the total cost to two decimal places.
• Returned an object that packages all this information together and printed it to the console.

Next steps

In the next guide, we will display the total cost to the user.