Help on "WorkAround Explorer" Project in Modules section

Hi everyone,

In the Exercise “WorkAround Explorer”, I tried to import the modules into main.js, but my code is NOT rendering. Let me break down my files:

  • main.js
    // TODO: Add your import statements here.

import {getRoles, getCompanies, getDataByRole, getDataByCompany, salaryData} from ‘./modules/salaryData.js’;

import {getAverageSalaryByRole, getAverageSalaryByCompany, getSalaryAtCompany, getIndustryAverageSalary} from ‘./modules/workAroundModule.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 = getAverageSalaryByRole(role);

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

}

  • workAroundModule.js

// Add your imports here.

import {getDataByRole, getDataByCompany} from ‘./modules/salaryData.js’;

import salaryData from ‘./modules/salaryData.js’;

// Replace the empty array with the appropriate imported function/value

const getAverageSalaryByRole = role => {

const roleData = getDataByRole(role);

const salariesOfRole = roleData.map(obj => obj.salary);

return calculateAverage(salariesOfRole);

}

// Replace the empty array with the appropriate imported function/value

const getAverageSalaryByCompany = company => {

const companyData = getDataByCompany(company);

const salariesAtCompany = companyData.map(obj => obj.salary);

return calculateAverage(salariesAtCompany);

}

// Replace the empty array with the appropriate imported function/value

const getSalaryAtCompany = (role, company) => {

const companyData = getDataByCompany(company);

const roleAtCompany = companyData.find(obj => obj.role === role);

return roleAtCompany.salary;

}

// Replace the empty array with the appropriate imported function/value

const getIndustryAverageSalary = () => {

const allSalaries = salaryData.map(obj => obj.salary);

return calculateAverage(allSalaries);

}

// Helper Function. Do not edit.

// Note: This function does not need to be exported since it is only used by the functions contained within this module.

function calculateAverage(arrayOfNumbers) {

let total = 0;

arrayOfNumbers.forEach(number => total += number);

return (total / arrayOfNumbers.length).toFixed(2);

}

export {getAverageSalaryByRole, getAverageSalaryByCompany, getSalaryAtCompany, getIndustryAverageSalary};

  • salaryData.js
    const salaryData = [

    { role: ‘CTO’, company: ‘Big Data Inc.’, salary: 320000},

    { role: ‘Technical Lead’, company: ‘Big Data Inc.’, salary: 230000},

    { role: ‘Software Engineer II’, company: ‘Big Data Inc.’, salary: 180000},

    { role: ‘Software Engineer I’, company: ‘Big Data Inc.’, salary: 140000},

    { role: ‘CTO’, company: ‘Medium Data Inc.’, salary: 215000},

    { role: ‘Technical Lead’, company: ‘Medium Data Inc.’, salary: 165000},

    { role: ‘Software Engineer II’, company: ‘Medium Data Inc.’, salary: 140000},

    { role: ‘Software Engineer I’, company: ‘Medium Data Inc.’, salary: 115000},

    { role: ‘CTO’, company: ‘Small Data Inc.’, salary: 175000},

    { role: ‘Technical Lead’, company: ‘Small Data Inc.’, salary: 135000},

    { role: ‘Software Engineer II’, company: ‘Small Data Inc.’, salary: 115000},

    { role: ‘Software Engineer I’, company: ‘Small Data Inc.’, salary: 95000},

];

const getRoles = () => {

return [‘CTO’, ‘Technical Lead’, ‘Software Engineer II’, ‘Software Engineer I’];

}

const getCompanies = () => {

return [‘Big Data Inc.’, ‘Medium Data Inc.’, ‘Small Data Inc.’];

}

const getDataByRole = role => {

return salaryData.filter(obj => obj.role === role);

}

const getDataByCompany = company => {

return salaryData.filter(obj => obj.company === company);

}

export {getRoles, getCompanies, getDataByRole, getDataByCompany, salaryData};

I am not sure where my error is. Any help will be appreciated.

Hi @jonathanisozaki09731
could you provide a link to the exercise and post the error message?
Please make sure your code is formatted:

Hi.
Is there something wrong with this exercise?
I did everything 3 times in diffrent ways in the browser and imported code into VSC and tried there.
After //import {getRoles, getCompanies, getDataByRole, getDataByCompany} from ‘./modules/salaryData.js’; into main.js (made it with the hints) it stops rendering 1 and 2 box and throws 403 404 errors.

Does any1 have a code that actually works in this exercise and can share, so i can check what’s wrong with mine?

9 Likes

After taking a quick look at it

the filepath you used in your imports seems to be incorrect. workAroundModule.js and salaryData.js are both located inside the same folder. Therefore you should use ./salaryData.js’ as your filepath in order to import.

8 Likes

Many thanks. I too had incorrect paths importing into * workAroundModule.js. These errors caused ‘Select a role’ and ‘Select a Company’ boxes to disappear when importing the four functions from * workAroundModule.js into main.js.
Lesson: Code can contain undetected bugs. In the “WorkAround Explorer” project, the error in workAroundModule.jsonly shows up in step 8 when the student is working on main.js.

4 Likes

Hi michaelschlter151095,

Thank you for the reply. I tried it and I still don’t get the desired output. I did correct it so I could get the correct output when I am done. Also, I edited and put ALL 4 functions from the salary.js file. But I will keep looking at my code.

Never mind! Problem solved! I made another syntax error. Thank you everyone for your help.

Hi everyone! For some reason you know how it goes but I have hit a brick wall and would really appreciate if anyone can help me fix my code! After importing —

import { getDataByRole, getDataByCompany, salaryData } from ‘./modules/workAroundModule.js’;

it breaks and no longer renders the page…

Heres my code:
main.js

// TODO: Add your import statements here.
import { getRoles, getCompanies } from './modules/salaryData.js';
import { getDataByRole, getDataByCompany, salaryData } from './modules/workAroundModule.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 <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 = getAverageSalaryByRole(role);
  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}`;
}

workAroundModule.js

// Add your imports here.
import { getDataByRole, getDataByCompany } from './salaryData.js';
import {salaryData} from './salaryData.js'; 
// Replace the empty array with the appropriate imported function/value
export const getAverageSalaryByRole = role => {
  const getDataByRole(role);
  const salariesOfRole = roleData.map(obj => obj.salary);
  return calculateAverage(salariesOfRole);
}

// Replace the empty array with the appropriate imported function/value
export const getAverageSalaryByCompany = company => {
  const getDataByCompany(company);
  const salariesAtCompany = companyData.map(obj => obj.salary);
  return calculateAverage(salariesAtCompany);
}

// Replace the empty array with the appropriate imported function/value
export const getSalaryAtCompany = (role, company) => {
  const getDataByCompany(company);
  const roleAtCompany = companyData.find(obj => obj.role === role);
  return roleAtCompany.salary;
}

// Replace the empty array with the appropriate imported function/value
export const getIndustryAverageSalary = () => {
  const salaryData = [].map(obj => obj.salary);
  return calculateAverage(allSalaries);
}


// Helper Function. Do not edit.
// Note: This function does not need to be exported since it is only used by the functions contained within this module.
function calculateAverage(arrayOfNumbers) {
  let total = 0;
  arrayOfNumbers.forEach(number => total += number);
  return (total / arrayOfNumbers.length).toFixed(2);
}



salaryData.js

const salaryData = [
  { role: 'CTO', company: 'Big Data Inc.', salary: 320000},
  { role: 'Technical Lead', company: 'Big Data Inc.', salary: 230000},
  { role: 'Software Engineer II', company: 'Big Data Inc.', salary: 180000},
  { role: 'Software Engineer I', company: 'Big Data Inc.', salary: 140000},
  { role: 'CTO', company: 'Medium Data Inc.', salary: 215000},
  { role: 'Technical Lead', company: 'Medium Data Inc.', salary: 165000},
  { role: 'Software Engineer II', company: 'Medium Data Inc.', salary: 140000},
  { role: 'Software Engineer I', company: 'Medium Data Inc.', salary: 115000},
  { role: 'CTO', company: 'Small Data Inc.', salary: 175000},
  { role: 'Technical Lead', company: 'Small Data Inc.', salary: 135000},
  { role: 'Software Engineer II', company: 'Small Data Inc.', salary: 115000},
  { role: 'Software Engineer I', company: 'Small Data Inc.', salary: 95000},
];

export const getRoles = () => {
  return ['CTO', 'Technical Lead', 'Software Engineer II', 'Software Engineer I'];
}

export const getCompanies = () => {
  return ['Big Data Inc.', 'Medium Data Inc.', 'Small Data Inc.'];
}

export const getDataByRole = role => {
  return salaryData.filter(obj => obj.role === role);
}

export const getDataByCompany = company => {
  return salaryData.filter(obj => obj.company === company);
}

export default salaryData;

In advance thanks for taking the time to read my post and help me out!!! Happy coding!!

These functions and the array aren’t in the workAroundModule.js file and they aren’t the ones to import to main.js

Hey thanks for getting back to me! Im sorry im probably being really thick here but can you ellaborate for me please?

getDataByRole, getDataByCompany, salaryData
Have a look where these functions and the array are declared. It’s not the workAroundModule.js you try to import them from. They requested you to import to main.js. Just not these ones. Have a look at the workAroundModule.js file and see what you’re exporting from there.

1 Like

Thanks mirja_t I managed to fix the problem and all done now!! I think I just needed a break because even after reading your last comment I was still lost but this morning I completed it with ease!!! Thanks again for your help!!

1 Like

If you’re still struggling feel free to check my completed project here: GitHub - gabriel-cloud/WorkAround-Explorer

3 Likes

Hello guys, I am at step 4 but the radio-style inputs are not rendered yet, here is my code:
(I did not add the workAroundModule as I did not get to use it yet)
index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WorkAround</title>
    <link rel="stylesheet" type="text/css" href="index.css" />
    <script type="module" src="main.js" defer></script>
  </head>
  <body>
    <main>
      <!-- The roles and companies <section>s are dynamically created in main.js with renderInputButtons() -->
      <section id="resultsContainer">
        <h3>Details:</h3>
        <p id="salarySelected"> ... </p>
        <p id="salaryAverageByRole"> ... </p>
        <p id="salaryAverageByCompany"> ... </p>
        <p id="salaryAverageIndustry"> ... </p>
      </section>
    </main>
  </body>
</html>

main.js

// TODO: Add your import statements here.
import {getRoles, getCompanies} from "./modules/salaryData";
// 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 <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 = 0;
  const averageSalaryByCompany = 0;
  const salary = 0;
  const industryAverageSalary = 0;

  // 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}`;
}

salaryData.js

const salaryData = [
  { role: 'CTO', company: 'Big Data Inc.', salary: 320000},
  { role: 'Technical Lead', company: 'Big Data Inc.', salary: 230000},
  { role: 'Software Engineer II', company: 'Big Data Inc.', salary: 180000},
  { role: 'Software Engineer I', company: 'Big Data Inc.', salary: 140000},
  { role: 'CTO', company: 'Medium Data Inc.', salary: 215000},
  { role: 'Technical Lead', company: 'Medium Data Inc.', salary: 165000},
  { role: 'Software Engineer II', company: 'Medium Data Inc.', salary: 140000},
  { role: 'Software Engineer I', company: 'Medium Data Inc.', salary: 115000},
  { role: 'CTO', company: 'Small Data Inc.', salary: 175000},
  { role: 'Technical Lead', company: 'Small Data Inc.', salary: 135000},
  { role: 'Software Engineer II', company: 'Small Data Inc.', salary: 115000},
  { role: 'Software Engineer I', company: 'Small Data Inc.', salary: 95000},
];

const getRoles = () => {
  return ['CTO', 'Technical Lead', 'Software Engineer II', 'Software Engineer I'];
}

const getCompanies = () => {
  return ['Big Data Inc.', 'Medium Data Inc.', 'Small Data Inc.'];
}

const getDataByRole = role => {
  return salaryData.filter(obj => obj.role === role);
}

const getDataByCompany = company => {
  return salaryData.filter(obj => obj.company === company);
}

export default salaryData;
export {getRoles, getDataByRole, getDataByCompany, getCompanies};

2 Likes

Hi, I have gone through this exercise multiple times and the radio buttons always stop rendering at step 8. I have started from the beginning twice and I also copy/pasted gabec123’s code from github and it still doesn’t work. Can someone please look and let me know what I’m missing?

main.js

// TODO: Add your import statements here.
import { getCompanies, getRoles } from "./files/modules/salaryData.js";
import {
  getAverageSalaryByRole,
  getSalaryAtCompany,
  getIndustryAverageSalary,
  getAverageSalaryByCompany,
} from "./files/modules/workAroundModule.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 <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 = getAverageSalaryByRole(role);
  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}`;
}

workAroundModule.js

// Add your imports here.
import { getDataByRole, getDataByCompany } from "./salaryData.js";
import salaryData from "./salaryData.js";
// Replace the empty array with the appropriate imported function/value
const getAverageSalaryByRole = (role) => {
  const roleData = getDataByRole(role);
  const salariesOfRole = roleData.map((obj) => obj.salary);
  return calculateAverage(salariesOfRole);
};

// Replace the empty array with the appropriate imported function/value
const getAverageSalaryByCompany = (company) => {
  const companyData = getDataByCompany(company);
  const salariesAtCompany = companyData.map((obj) => obj.salary);
  return calculateAverage(salariesAtCompany);
};

// Replace the empty array with the appropriate imported function/value
const getSalaryAtCompany = (role, company) => {
  const companyData = getDataByCompany(company);
  const roleAtCompany = companyData.find((obj) => obj.role === role);
  return roleAtCompany.salary;
};

// Replace the empty array with the appropriate imported function/value
const getIndustryAverageSalary = () => {
  const allSalaries = salaryData.map((obj) => obj.salary);
  return calculateAverage(allSalaries);
};

// Helper Function. Do not edit.
// Note: This function does not need to be exported since it is only used by the functions contained within this module.
function calculateAverage(arrayOfNumbers) {
  let total = 0;
  arrayOfNumbers.forEach((number) => (total += number));
  return (total / arrayOfNumbers.length).toFixed(2);
}

export {
  getAverageSalaryByRole,
  getSalaryAtCompany,
  getIndustryAverageSalary,
  getAverageSalaryByCompany,
};

salaryData.js

onst salaryData = [
  { role: "CTO", company: "Big Data Inc.", salary: 320000 },
  { role: "Technical Lead", company: "Big Data Inc.", salary: 230000 },
  { role: "Software Engineer II", company: "Big Data Inc.", salary: 180000 },
  { role: "Software Engineer I", company: "Big Data Inc.", salary: 140000 },
  { role: "CTO", company: "Medium Data Inc.", salary: 215000 },
  { role: "Technical Lead", company: "Medium Data Inc.", salary: 165000 },
  { role: "Software Engineer II", company: "Medium Data Inc.", salary: 140000 },
  { role: "Software Engineer I", company: "Medium Data Inc.", salary: 115000 },
  { role: "CTO", company: "Small Data Inc.", salary: 175000 },
  { role: "Technical Lead", company: "Small Data Inc.", salary: 135000 },
  { role: "Software Engineer II", company: "Small Data Inc.", salary: 115000 },
  { role: "Software Engineer I", company: "Small Data Inc.", salary: 95000 },
];

const getRoles = () => {
  return [
    "CTO",
    "Technical Lead",
    "Software Engineer II",
    "Software Engineer I",
  ];
};

const getCompanies = () => {
  return ["Big Data Inc.", "Medium Data Inc.", "Small Data Inc."];
};

const getDataByRole = (role) => {
  return salaryData.filter((obj) => obj.role === role);
};

const getDataByCompany = (company) => {
  return salaryData.filter((obj) => obj.company === company);
};

export { getRoles, getCompanies, getDataByRole, getDataByCompany };
export default salaryData;

Thank you for your help!

According to this file path, this is what the file tree must look like:

|__ main.js
|__ files
      |__ modules
             |__ workAroundModule.js
             |__ salaryData.js

Does it?
You can open the browser’s console to check if all required files can be found. If not, you would need to correct your file paths.

Hey everyone ! I also have a problem with this project. Here is my code below:

main.js

// TODO: Add your import statements here.
import { getRoles, getCompanies } from './modules/salaryData.js';
import { getAverageSalaryByRole, getAverageSalaryByCompany, getSalaryAtCompany, getIndustryAverageSalary } from './modules/workAroundModule.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 <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 = getAverageSalaryByRole(role);
  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}`;
}

salaryData.js

const salaryData = [
  { role: 'CTO', company: 'Big Data Inc.', salary: 320000},
  { role: 'Technical Lead', company: 'Big Data Inc.', salary: 230000},
  { role: 'Software Engineer II', company: 'Big Data Inc.', salary: 180000},
  { role: 'Software Engineer I', company: 'Big Data Inc.', salary: 140000},
  { role: 'CTO', company: 'Medium Data Inc.', salary: 215000},
  { role: 'Technical Lead', company: 'Medium Data Inc.', salary: 165000},
  { role: 'Software Engineer II', company: 'Medium Data Inc.', salary: 140000},
  { role: 'Software Engineer I', company: 'Medium Data Inc.', salary: 115000},
  { role: 'CTO', company: 'Small Data Inc.', salary: 175000},
  { role: 'Technical Lead', company: 'Small Data Inc.', salary: 135000},
  { role: 'Software Engineer II', company: 'Small Data Inc.', salary: 115000},
  { role: 'Software Engineer I', company: 'Small Data Inc.', salary: 95000},
];

const getRoles = () => {
  return ['CTO', 'Technical Lead', 'Software Engineer II', 'Software Engineer I'];
}

const getCompanies = () => {
  return ['Big Data Inc.', 'Medium Data Inc.', 'Small Data Inc.'];
}

const getDataByRole = role => {
  return salaryData.filter(obj => obj.role === role);
}

const getDataByCompany = company => {
  return salaryData.filter(obj => obj.company === company);
}

export { getRoles, getCompanies, getDataByRole, getDataByCompany };
export default salaryData;

workAroundModule.js

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

// Replace the empty array with the appropriate imported function/value
const getAverageSalaryByRole = role => {
  const roleData = getDataByRole(role);
  const salariesOfRole = roleData.map(obj => obj.salary);
  return calculateAverage(salariesOfRole);
}

// Replace the empty array with the appropriate imported function/value
const getAverageSalaryByCompany = company => {
  const companyData = getDataByCompany(company);
  const salariesAtCompany = companyData.map(obj => obj.salary);
  return calculateAverage(salariesAtCompany);
}

// Replace the empty array with the appropriate imported function/value
const getSalaryAtCompany = (role, company) => {
  const companyData = getSalaryAtCompany(company);
  const roleAtCompany = companyData.find(obj => obj.role === role);
  return roleAtCompany.salary;
}

// Replace the empty array with the appropriate imported function/value
const getIndustryAverageSalary = () => {
  const allSalaries = salaryData.map(obj => obj.salary);
  return calculateAverage(allSalaries);
}


// Helper Function. Do not edit.
// Note: This function does not need to be exported since it is only used by the functions contained within this module.
function calculateAverage(arrayOfNumbers) {
  let total = 0;
  arrayOfNumbers.forEach(number => total += number);
  return (total / arrayOfNumbers.length).toFixed(2);
}

export { getAverageSalaryByRole, getAverageSalaryByCompany, getSalaryAtCompany, getIndustryAverageSalary };

Thanks in advance

I am totally stumped on step 9. I’ve imported everything, and it all renders properly, but when I try to actually use the function calls in updateResults() instead of the filler values, it doesn’t work.

When I select the first radio option, I get the following runtime error in the browser console:

main.js:57 Uncaught TypeError: Cannot read property ‘value’ of null
at HTMLInputElement.updateResults (main.js:57)

When I select the 2nd radio option, I get the following runtime error in browser console:

Uncaught TypeError: Cannot read property ‘salary’ of undefined
at getSalaryAtCompany (workAroundModule.js:23)
at HTMLInputElement.updateResults (main.js:66)

I have no idea what any of this means. I’ve looked at everything at the referenced lines, and it all looks fine to me. I’ve checked the functions and all my imports/exports, and I can’t figure out what could be the problem. Any help would be greatly appreciated.

Here’s my code.

main.js

// TODO: Add your import statements here.
import { getRoles, getCompanies } from './modules/salaryData.js'
import {
  getAverageSalaryByRole,
  getAverageSalaryByCompany,
  getSalaryAtCompany,
  getIndustryAverageSalary
  } from './modules/workAroundModule.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 <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 = getAverageSalaryByRole(role);
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}`;
}




workAroundModule.js

// Add your imports here.

import { getDataByRole, getDataByCompany } from './salaryData.js';

import salaryData from './salaryData.js';

// Replace the empty array with the appropriate imported function/value

export const getAverageSalaryByRole = role => {

  const roleData = getDataByRole();

  const salariesOfRole = roleData.map(obj => obj.salary);

  return calculateAverage(salariesOfRole);

}

// Replace the empty array with the appropriate imported function/value

export const getAverageSalaryByCompany = company => {

  const companyData = getDataByCompany();

  const salariesAtCompany = companyData.map(obj => obj.salary);

  return calculateAverage(salariesAtCompany);

}

// Replace the empty array with the appropriate imported function/value

export const getSalaryAtCompany = (role, company) => {

  const companyData = getDataByCompany();

  const roleAtCompany = companyData.find(obj => obj.role === role);

  return roleAtCompany.salary;

}

// Replace the empty array with the appropriate imported function/value

export const getIndustryAverageSalary = () => {

  const allSalaries = salaryData.map(obj => obj.salary);

  return calculateAverage(allSalaries);

}

// Helper Function. Do not edit.

// Note: This function does not need to be exported since it is only used by the functions contained within this module.

function calculateAverage(arrayOfNumbers) {

  let total = 0;

  arrayOfNumbers.forEach(number => total += number);

  return (total / arrayOfNumbers.length).toFixed(2);

}

salaryData.js

const salaryData = [

  { role: 'CTO', company: 'Big Data Inc.', salary: 320000},

  { role: 'Technical Lead', company: 'Big Data Inc.', salary: 230000},

  { role: 'Software Engineer II', company: 'Big Data Inc.', salary: 180000},

  { role: 'Software Engineer I', company: 'Big Data Inc.', salary: 140000},

  { role: 'CTO', company: 'Medium Data Inc.', salary: 215000},

  { role: 'Technical Lead', company: 'Medium Data Inc.', salary: 165000},

  { role: 'Software Engineer II', company: 'Medium Data Inc.', salary: 140000},

  { role: 'Software Engineer I', company: 'Medium Data Inc.', salary: 115000},

  { role: 'CTO', company: 'Small Data Inc.', salary: 175000},

  { role: 'Technical Lead', company: 'Small Data Inc.', salary: 135000},

  { role: 'Software Engineer II', company: 'Small Data Inc.', salary: 115000},

  { role: 'Software Engineer I', company: 'Small Data Inc.', salary: 95000},

];

const getRoles = () => {

  return ['CTO', 'Technical Lead', 'Software Engineer II', 'Software Engineer I'];

}

const getCompanies = () => {

  return ['Big Data Inc.', 'Medium Data Inc.', 'Small Data Inc.'];

}

const getDataByRole = role => {

  return salaryData.filter(obj => obj.role === role);

}

const getDataByCompany = company => {

  return salaryData.filter(obj => obj.company === company);

}

export {getRoles, getCompanies, getDataByRole, getDataByCompany};

export default salaryData;

Thanks in advance for any help you can offer!

Your problem is the same as that of most people in this thread: Your file path is not correct. You use the same file path for the imports in all your files. Although they are in different directories.

Sorry! I accidentally posted the body of workAroundModule.js for both main.js and workAroundModule.js. I have edited the post. See that my filepaths in main.js are different. Hence, I’m stumped.