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

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};**

}