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 
[codebyte]
INDEX.html
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;
