Work Around Explorer Won't Render step 4

Hi everyone! This may not be a new topic but all the solutions i have read thus far do not fix my issue with this project. I am stuck on Step 4 after importing my module containing getRoles and getDataByCompany functions. i then called the functions in the appropriate place. I modified the index.html file to account for the script to be read is a module, but for whatevver reason, my project does not render. According to the last paragraph of Task 4 : After completing this task, all three columns should render again and you should see the radio-style <input> elements rendered in your application!" I do not have 3 columns and I feel like i am the only one that is having that issue on step 4. I have compared my code to others projects that have been successful but nothing changes. my code is below. any assistance is greatly appreciated and will prevent me from throwing my computer across the room :slight_smile:

[codebyte]
INDEX.html

WorkAround

Details:

...

...

...

...

[/codebyte]

MAIN.js

// TODO: Add your import statements here. import { getRoles, getCompanies } from "./salaryData.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;

I don’t have access to the project.

What does your file structure (directory) look like?

Are you sure the file paths in your import statements in main.js are correct?

https://www.codecademy.com/projects/practice/es6-modules-workaround

let me know if that link takes you to the project. If not I wil l figure something out.
Re file structure, i attached a screen shot of the excercises folder structure along with the 4 tabs. I hope that helps. Thank you in advance for your time. I appreciate it!

In you original post, in your main.js file, you have the import:

import { getRoles, getCompanies } from "./salaryData.js";

Based on your screenshot of folder structure, the main.js and salaryData.js files are not in the same folder. So, the above import isn’t the correct path.

Instead, the import should be:

import { getRoles, getCompanies } from "./modules/salaryData.js";
1 Like

You are so right! I don’t know why I didn’t see that before it seems so obvious. Thanks again!