Workaround Project Doesn't Render - FormatNumber Issue

Hi there!

On the Workaround Project challenge, it asks to develop the formatNumber.

I’ve done it and tested it on VSCode and it works, however when I copy to Codecademy platform and try it the details don’t show. For some reason, it doesn’t render the details on the screen.

Can someone help?

Code below.

const formatNumber = number => {
    const strNumber = number.toString();
    newStrNumber = '';
    let counter = 0;
    if (!strNumber.includes('.')) {
        newStrNumber = newStrNumber + '.00';
    }
    for (let i = strNumber.length - 1; i >= 0; i--) {
        if (counter === 3) {
            newStrNumber = ',' + newStrNumber;
            counter = 0;
        }
        newStrNumber = strNumber[i] + newStrNumber;
        counter++;
        if (strNumber[i] === '.') {
            counter = 0;
        }
    }
    return newStrNumber;
}

Thanks!

Where did you call the formatNumber function ?

Hey @janbazant1107978602.
Sorry for the late reply.

I call it on main.js.


import { getRoles, getCompanies } from './modules/salaryData.js';
import { getAverageSalaryByRole, getAverageSalaryByCompany, getSalaryAtCompany, getIndustryAverageSalary } from './modules/workAroundModule.js';
import { formatNumber } from './modules/utilities.js';


const companies = getCompanies();
const roles = getRoles();

// Create input buttons for every company and role represented in the data.
renderInputButtons(companies, 'company');
renderInputButtons(roles, 'role');

// This function will create a new <section> with radio
// inputs based on the data provided in the labels array.
function renderInputButtons(labels, groupName) {
  const container = document.createElement('section');
  container.setAttribute('id', `${groupName}Inputs`);

  let header = document.createElement('h3');
  header.innerText = `Select a ${groupName}`;
  container.appendChild(header);

  labels.forEach(label => { // For each label...
    // Create the radio input element.
    let divElement = document.createElement('div');
    divElement.setAttribute('class', 'option');

    let inputElement = document.createElement('input');
    inputElement.setAttribute('type', 'radio');
    inputElement.setAttribute('name', groupName);
    inputElement.setAttribute('value', label);
    divElement.appendChild(inputElement);

    // Create a label for that radio input element.
    let labelElement = document.createElement('label');
    labelElement.setAttribute('for', label);
    labelElement.innerText = label;
    divElement.appendChild(labelElement);

    // Update the results when the input is selected.
    inputElement.addEventListener('click', updateResults);

    container.appendChild(divElement);
  });

  document.querySelector('main').prepend(container);
}

function updateResults() {
  // Get the current selected company and role from the radio button inputs.
  const company = document.querySelector("input[name='company']:checked").value;
  const role = document.querySelector("input[name='role']:checked").value;

  // If either the company or role is unselected, return.
  if (!company || !role) { return; }

  // TODO: Use the workAroundModule functions to calculate the needed data.
  const averageSalaryByRole = formatNumber(getAverageSalaryByRole(role));
  // const formatAverageSalaryByRole = formatNumber(averageSalaryByRole);
  const averageSalaryByCompany = getAverageSalaryByCompany(company);
  const salary = getSalaryAtCompany(role, company);
  const industryAverageSalary = getIndustryAverageSalary();

  // Render them to the screen.
  document.getElementById('salarySelected').innerText = `The salary for ${role}s at ${company} is \$${salary}`;
  document.getElementById('salaryAverageByRole').innerText = `The industry average salary for ${role} positions is \$${averageSalaryByRole}`;
  document.getElementById('salaryAverageByCompany').innerText = `The average salary at ${company} is \$${averageSalaryByCompany}`;
  document.getElementById('salaryAverageIndustry').innerText = `The average salary in the Tech industry is \$${industryAverageSalary}`;
}

Thanks for your help.

Francisco

It worked when, in the formatNumber function,
I changed
newStrNumber = '';
to
let newStrNumber = '';

and put
export { formatNumber };
at the end of utilities.js

That’s it! Thank you so much!