Skip to content

Instantly share code, notes, and snippets.

@codecademydev
Created Nov 25, 2021
Embed
What would you like to do?
Codecademy export
<!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"></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, 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}`;
}
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(role, company);
const roleAtCompany = companyData.find(obj => obj.role === role);
return roleAtCompany.salary;
}
// Replace the empty array with the appropriate imported function/value
const getIndustryAverageSalary = salaryData() => {
const allSalaries = [].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 };
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment