WorkAround Explorer | Stuck on step 8

Hi there! I’m struggling to complete the WorkAround Explorer project and i’m stuck on step 8. I have looked around the forum and have seen that other people have had similar issues at this step. The forum suggest that the file path is incorrect but i have checked mine over and over again and this is not the issue in my case. I have also checked and compared my code to a completed version of the project on gitHub and everything checks out to be the same?

This has left me very confused? My problem is that when i import the functions from the workAroundModule.js file the ‘select a role’ & ‘select a company’ panes disappear and i’m just left with the ‘details’ pane?

If anyone can help me resolve this issue it would be greatly appreciated!

https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-22-javascript-syntax-part-iii/modules/wdcp-22-learn-javascript-syntax-modules/projects/es6-modules-workaround

Here are my code files below…

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.js";

import {
  getAverageSalaryByRole,
  getSalaryAtCompany,
  getIndustryAverageSalary,
  getAverageSalaryByCompany,
} from "./modules/workAroundModule.js";

// TODO: Get the companies and roles using the salaryData module.
const companies = getRoles();
const roles = getCompanies();

// 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 { getDataRole, getDataByCompany } from './salaryData.js';

import salaryData from './salaryData.js';
// Replace the empty array with the appropriate imported function/value
const getAverageSalaryByRole = role => {
  const roleData = [];
  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 = [];
  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 = [];
  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 = [].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

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;

1 Like

It looks like you missed step 6:
replacing the [] in WorkAroundModule.js with the appropriate function calls.

Thanks for your response, i have updated the empty arrays in workAroundModule.js with the appropriate function calls, and still the problem persists.

workAroundModule.js

// Add your imports here.
import { getDataRole, 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,
};

You have a typo in the import stuff in workAroundModule.js

getDataRole should be getDataByRole

Also, in main.js, you switched 2 statements:

That should be

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

Thank you so much for your help!