Workaround explorer

Hello
Could anyone help me please ?
I have been doing this project 'WorkAround explorer" , I am in stage 8 which is almost finished of the project but i think my code is wrong as it didn’t come out as expected.
Below is my code.
Could you pls let me know where I am wrong ?
thanks

<!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>
// TODO: Add your import statements here.
import getRoles from './modules/salaryData.js'
import 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}`;
}
// Add your imports here.
import {getDataByRole, getDataByCompany} from './module/salaryData.js';
import salaryData from './module/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.
export {getAverageSalaryByRole,getAverageSalaryByCompany,getSalaryAtCompany,getIndustryAverageSalary};
function calculateAverage(arrayOfNumbers) {
 let total = 0;
 arrayOfNumbers.forEach(number => total += number);
 return (total / arrayOfNumbers.length).toFixed(2);
}
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; 













Hi :slight_smile:

What do you think is wrong? Is the outcome different than expected or is it not running?
What methods have you used to try to debug?

Is there a particular step this is associated with? (you can link the exercise for us to reference more clearly what your trouble is)

HI ToastedPitabread
thanks for your reply. 

i think my code is wrong as the outcome is not like the sample Codeacademy has shown( attached). My outcome just showed only 'details with blank page' whereas Codeacademy's sample with 3 columns. 
I don't know how to use debug? Are there lots of debugs ? 

I don't think there is a particular step this is associated with. I am sorry i don't know how to link the exercise to Codeacademy. I saw a lot of people put the link of Codeacademy but i don't know how to share this link in here. I am talking about sharing link in codeacademy (not in Github). 
If you can advise me, that would be great and i will do step by step. 
![Screenshot 2021-05-27 at 08.32.27|690x431](upload://hjEEgM6Z5SOqwycp3o3PaTs6R4D.png)
![Screenshot 2021-05-27 at 08.32.54|690x431](upload://du80LYNslAu7n61w11TJdfMplSR.png)


THanks 

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.