WorkAround Explorer Project Help and Issues

Hi All, my first post here. I just completed this new project and took me a frustrating couple days to figure out because of how hard it is to debug issues in the CC environment. I reported some of these content suggestions via the CC module so hopefully it will improve over time, but decided to post some of the items here to help others going through this project now.

This project may be found in:

  1. Console to debug output

The console is not visible in this project, making it very hard to debug or find out why things don’t render correctly or any issues in your code. People completing the Learn JS course may not know how to enable the browser Console view if they haven’t done the HTML or CSS courses. I gave CC the suggestion to enable the console for this project. In the meantime I suggest you open up the browser developer tools (In Chrome is Ctrl+Shift+I > Console) and use console.log() calls through your code to debut what may be wrong.

When the module throws an error it just fails it to render the website table. You may be able to see the error on the Console or placing Console.log statements through your code to figure out where the execution stopped.

  1. In Step 8. Importing the workAroundModule.js function is making the table dissappear or not render

This one took me a while to figure out. In my case the problem was introduced in Step 5. When importing the salaryData.js functions to workAroundModule.js, make sure the path to the salaryData.js correct.
My solution:
I had the import incorrectly set as ./modules/salaryData.js, which is how you would import to main.JS. But workAroundModule.js and salaryData.js are both located in the same folder named ‘modules’, so the relative path would be ‘./salaryData.js’ or just ‘salaryData.js’.
This mistake would not be evident until Step 8, where importing the workAroundModule.js functions fails and makes the table in the website not render.

The imports in your workAroundModule.js should look like this:

// Add your imports here.
import {getDataByRole, getDataByCompany} from './salaryData.js';
import salaryData from './salaryData.js';

The imports in main.js should look like this

// TODO: Add your import statements here.
import { getRoles, getCompanies } from "./modules/salaryData.js";
import { getAverageSalaryByRole, getAverageSalaryByCompany, getSalaryAtCompany, getIndustryAverageSalary} from "./modules/workAroundModule.js";
import { formatNumber } from "./modules/utilities.js"; //If completing the Extra Challenge
  1. calculateAverage() helper function in workAroundModule.js returns a String and not a Number

The helper function formats the averaged number to two decimal places which returns a string instead of a number. This makes the 3 average functions from the module also return strings. Semantically and by context you would expect these to return Numbers.
This causes confusions in the Extra Challenge where you have to manipulate the number and format it from main.JS. If you are doing parameter validation to verify your formatNumber() function is receiving a number before proceding, then your function won’t execute.
My solution:
Your FormatNumber() function should be coded in a way that is can work with a string or a number input. Or just fix the problem at the source by modifying the return of the calculateAverage(arrayOfNumbers) function to convert string back to a number after rounding: return Number((total / arrayOfNumbers.length).toFixed(2));

  1. Extra Challenge Hint or Solution not producing the output requested in the instructions.
    The extra challenge asks you to create a module to format numbers in the following way:
const result = formatNumber(1234567.89);
// result = "1,234,567.89"

Then the solution or hint is just getting rid of the decimals and never adding them back in the following line: :roll_eyes:

  // Get rid of the decimals and convert to a string.
  let numStr = String(Math.floor(number));

The result of the function in the instructions would be “1,234,567”.
Here is my suggested solution to this problem that does output the formatted number with decimals as requested:

const formatNumber = (number) => {
  //Validate Input
  if (isNaN(number)) throw "Parameter to format is not a valid number";

  //Manipulate number as array
  const numArray = number.toString().split("");

  //Check if number has decimals and get index after last whole number
  let decimalPointIndex = numArray.findIndex((char) => char === ".");
  let endOfWholeNumberIndex =
    decimalPointIndex > 0 ? decimalPointIndex : numArray.length;

  //Add Commas every three whole number digits from right to left
  for (let i = endOfWholeNumberIndex - 3; i > 0; i -= 3) 
    numArray.splice(i, 0, ",");

  return numArray.join("");
};

export {formatNumber};

Hope this helps and happy learning!

3 Likes

Hey, thanks for your help on this, it really annoyed me for a while but you helped me think outside the square.

This is the first time I have used the forum by the way.

With regard to the formatNumber utility, I ended up trying something different (although I don’t know if it is cheating for this exercise?)

export const formatNumber = number => {
    if (number == NaN) {
      return newNumber = Number(number);
    } else {
      return new Intl.NumberFormat('en-EN', {minimumFractionDigits: 2}).format(number);
  }
  }
1 Like

thanks for the file path insight! :pray:

1 Like