Https://www.codecademy.com/courses/introduction-to-javascript/projects/es6-modules-workaround

https://www.codecademy.com/courses/introduction-to-javascript/projects/es6-modules-workaround

Hi everybody…
I’ve followed the steps of this exercise but no render, in step 8 I have the problem when I import of workAroundModule …
Please I need help…

This is the index

<!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>

this is the main

// TODO: Add your import statements here.

import {getRoles, getCompanies, getDataByRole, getDataByCompany } 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}`;

}

this is the workAroundModule

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

this is the salaryData

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;

Don’t worry I found out the solution…
Thanks everybody…

The mistake was in the import in workAroundModule…