-
-
Save codecademydev/8bd0a0084d9dc9e23a5e014c0686edb4 to your computer and use it in GitHub Desktop.
Codecademy export
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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" defer></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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// TODO: Add your import statements here. | |
import {getRoles, getCompanies} from './modules/salaryData.js'; | |
import {getAverageSalaryByRole, getAverageByCompany, getSalaryAtCompany, getIndustAverageSalary} from './modules/workAroundModule.js'; | |
import {formatNumber} from './modules/utilities.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 = formatNumber(getAverageSalaryByRole(role)); | |
const averageSalaryByCompany = formatNumber(getAverageSalaryByCompany(company)); | |
const salary = formatNumber(getSalaryAtCompany(role, company)); | |
const industryAverageSalary = formatNumber(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}`; | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const formatNumber = number => { | |
const newArr = number.toString().split(''); | |
for(let i = newArr.length - 3; i > 0; i -= 3) { | |
if(newArr[i] !== '.') { | |
newArr.splice([i], 0, ','); | |
} | |
} | |
return newArr.join(''); | |
} | |
export {formatNumber}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Add your imports here. | |
import {getDataByRole, getDataByCompany} from './salaryData.js'; | |
import salaryData from './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}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment