Work Around Project step 8

Hi!
I had similar issue with step 2 before, I solved it but now after step 8 again it’s disappearing.
Screenshot (2)
this is the only this I see. there should be radio inputs.

// 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 = 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}`; }
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;
// 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 };
<meta charset="utf-8">

<title>WorkAround</title>

<link rel="stylesheet" type="text/css" href="index.css" />

<script type="module" src="main.js" defer></script>
<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>

what’s the problem here?

Have replicated this issue and as yet still have not figured out the cause. Passed this along to the curriculum team for review.

1 Like

please reply me here when you have the solution

1 Like