WorkAround explorer - Solution

I struggled a bit with the in-browser solution for WorkAround Explorer project and thought I would post my solution here: GitHub - gabriel-cloud/WorkAround-Explorer

3 Likes

Cheers for this… just almost finished this. I have just got to and am struggling with the final extra challenge with rendering the formatted numbers. Any ideas?

I’ve just pushed it on GitHub. How’s your file looking?

You beat me to it… I had to go do something else. I really struggled with this as I am not that familiar with using JS with the DOM syntax (I am just starting the building interacive websites course) and all the un familiar code and threw me a bit. When I saw your code I kicked myself! I did get it to work. One question… do you have a comma (,) after the I get ,230,000 etc?

Yeah. In utilities for (let i = integerNum.length - 3; i > 0; i -= 3)

With I >= 0 it incorrectly adds a comma at the beginning. Set i>0 and it should be fine.

1 Like

For the number formatter, I went the route of using the built in Intl.NumberFormat function. I used this option because it can be made locale specific, and easier to write/implement.

Note: because this function adds the currency symbol, be sure to delete the “/$” from each output string in the “// Render them to the screen.” section found at the bottom of main.js.

**The solution looked like this: **
utilities.js:
export const formatNumber = new Intl.NumberFormat(‘en-US’, {

** style: ‘currency’,**

** currency: ‘USD’,**

** // These options are needed to round to whole numbers if that’s what you want.**

** minimumFractionDigits: 0, **

** // (this suffices for whole numbers, but will print 2500.10 as $2,500.1)**

** maximumFractionDigits: 0, **

** // (causes 2500.99 to be printed as $2,501)**

});

main.js:
// 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’;

// TODO: Get the companies and roles using the salaryData module.

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 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.format(getAverageSalaryByRole(role));**

** const averageSalaryByCompany = formatNumber.format(getAverageSalaryByCompany(company));**

** const salary = formatNumber.format(getSalaryAtCompany(role, company));**

** const industryAverageSalary = formatNumber.format(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};**

}

Hey guys!

I saw the built-in function too, but wrote it from scratch anyway!
utilities.js

function formatNumber(num){
//convert number to string with 2 decimal places
  let cStr = num.toFixed(2).toString();
//this contains the new formatted number (it's gonna be reversed, gotta flip it at the end)
  let nStr = [''];
//to easily keep track of digits
  let idx = 1;
//iterate backwards through string 
  for(let i = cStr.length - 1; i >= 0; i--){
    //push current digit to the array 
    //(you could use .charAt() but this seemed better)
    nStr.push(cStr[i]);
    //check if:
    //index is a multiple of 3
    //not at the last digit 
    //and after the decimal point
    //if true add ',' 
    if(idx % 3 === 0 && idx + 1 <= cStr.length && idx > 3){
      nStr.push(',');
    };
    //increment index
    idx++;
  };
//reverse the array, join it's elements into a single string then return the value
  return nStr.reverse().join('');

};

export {formatNumber};

Then I imported the module into main.js and added the function to the output:

  // Render them to the screen.
  document.getElementById('salarySelected').innerText = `The salary for ${role}s at ${company} is \$${formatNumber(salary)}`;

You can check the whole thing here,
and the working site here.

I think the formatNumber function you provide doesn’t work, I found one on stack overflow works

export default function formatNumbers(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}