WorkAround Explorer Project/ Intermediate Javascript

Firts here is the link:
https://www.codecademy.com/courses/learn-intermediate-javascript/projects/es6-modules-workaround

Hello everybody! I have done all posible tests and typo checks and the program is not doing what it suppost to do. Isntead of the three windows:

  1. Select a role
  2. Select a company
  3. Details

I only see the third window: Details

Thank you in advance for your help!

image

When run the Webdevelpers tools I get this:
salaryData.js:1 Failed to load resource: the server responded with a status of 404 ()

this is telling me that the main.js is not loading salaryData.js I guess but here the code for import fo salayData.js:

import { getRoles, getCompanies } from ‘./modules/salaryData.js’;

One thing I notice is when comment the following the 3 windows are back

image

Here is the code in main:

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

}

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

AND HERE IS THE CODE OF salaryData.js:

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;

1 Like

Did you do #4 yet? That asks you to put type=“module” in the <script> tag linking your main.js to index.HTML

yes I did:

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

And here 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);

}

export {

getAverageSalaryByRole,

getAverageSalaryByCompany,

getSalaryAtCompany,

getIndustryAverageSalary

};

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

}

import { getDataByRole, getDataByCompany } from ‘./modules/salaryData.js’;
import salaryData from “./modules/salaryData.js”;

workAroundModule.js is in the same directory as salaryData.js, so check your paths in these imports.

Thank you davejandrea. Yes it was that. yes it was a very simple mistake but I dont why I didtnt think of it :rofl: I was close. All I had ask the rubber duck simple questions:

  1. Who needs salaryData.js? > find the statement with import salaryData
  2. Where is salaryData.js relative compared to the module that need it > write the correct path statement (**./**lablabla)

davejandrea do have any idea why Codecademy decided for these two last projects not to include the CODE at least?
Sometimes there is even a Youtube tutorial with it in the Get Untuck window.
For begginers is a struggle to find even simple issues like this. We have to wait till somebody kind like you (you were the only one) that has the time to get me out this mud so I can move forward. Those lucky that they money to pay a BootCamp school they have dedicated teacher and a Slack, the rest of us: Google, this forum or Stack Overflow… :disappointed_relieved:

Thank you!!!

Hi davejandrea,

I would like to ask your help again. This is for the final task #10. On this one they asked us to put commas on the numbers . I have to be honest after spending time with the duck I knew I had to use the String() method, but I would never come up with a whole code block that really works. So I had to look into the HINT. But even then I had to struggle to understand the code.

for example I had the idea of this code:

1. Convert the number parameter into a string:

let numStr = String(number);

but that was wrong because I forgot to first get rid of the decimals, but how do I suppose to know that? ah!!! because you need characters at the end! eureka!

2. Put the commas between every 3rd digit?

oh this is telling me to add something extra to the string I get in the formatNumber function. Well I can add a comma this + ‘,’
but I need to add it every 3rd digit so I need to tread the string as an array? I guess yes
so the only thing I could think of is the slice() method but how could I implemented?

numStr = numStr.slice(-3);

But not, when I look into the HINT they used a for loop to do this, but why if the only thing I needed was to move 3 digits from the last character and put the comma there? >>>> ah because I didn’t include Suckerber’s salary?

My problem is to be able to understand this code works on this salary: 1234567.89
// result = “1,234,567.89”

for (let i = numStr.length - 3; i > 0; i -= 3) {
numStr = numStr.slice(0, i) + ‘,’ + numStr.slice(i);
}

let’s see:

  1. i = numStr.length - 3 = 123456 >>>>>>correct?

  2. i -= 3) = 123 >>>>>>correct? but this was need in the salaries we had >>>>>>correct?

  3. numStr.slice(0, i) = 123456 >>>>>>correct?

  4. numStr.slice(i) = 123 >>>>>>correct?

davejandrea the BIG thing about programming is not learning all the syntax, methods, objects, functions and classes but learning how to analysis or pseudo code a problem and come up with the right code for it. Of course we can use Google, Web Dev Tool , this Forum and Stackoverflow but that doesn’t help you become a coder problem solver. A person how knows how every single component works as a unit or as machine in connection with each other (like modules in javascript)

So what I really wanted to ask to know any book besides “Eloquent JavaScript”, YouTube course, Udemy course, Online School, Online video course that teach exactly that by putting a problem to be solve and how to resolve it showing every step a programmer will take to resolve it specially the pseudo code part.

Thank you in advance!

Cheers

Junier

the idea is more about learning about : Problem Solving and Basic Programming Logic. How to learn how to break down a problem and compose it in pseudo code to be able later to rebuild it in a clean and efficient code. Some of it has to do with “Creative Thinking”. I was thinking to buy this book maybe: " Think Like a Programmer: An Introduction to Creative Problem Solving" by V. Anton Spraul but not only I will get this book but I wonder if there like a online course with video.