Building a Salary Calculator with React
Develop a simple React application that calculates potential salary increases based on skill level, experience, and location to help developers set career goals.
import React, { useState } from 'react';
function SalaryCalculator() {
// State hooks for input values
const [skillLevel, setSkillLevel] = useState('junior');
const [experience, setExperience] = useState(0);
const [location, setLocation] = useState('');
const [salary, setSalary] = useState(0);
// Function to calculate the salary
const calculateSalary = () => {
let baseSalary;
switch(skillLevel) {
case 'junior':
baseSalary = 50000;
break;
case 'midlevel':
baseSalary = 70000;
break;
case 'senior':
baseSalary = 90000;
break;
default:
baseSalary = 50000;
}
// Calculate potential increase based on experience
const experienceIncrease = 1 + experience * 0.05;
// Adjust salary based on location multiplier
let locationMultiplier = 1;
if (location === 'San Francisco' || location === 'New York') {
locationMultiplier = 1.2;
}
// Set the salary state with the calculated salary
setSalary(baseSalary * experienceIncrease * locationMultiplier);
};
return (
<div>
<h2>Salary Calculator</h2>
...
</div>
);
}
export default SalaryCalculator;
This piece of code defines a React functional component called 'SalaryCalculator' that uses React hooks to track state for user inputs (skill level, years of experience, and location) and the calculated salary. It includes a calculateSalary function that computes the salary based on these inputs.
<label htmlFor='skillLevel'>Skill Level:</label>
<select id='skillLevel' value={skillLevel} onChange={(e) => setSkillLevel(e.target.value)}>
<option value='junior'>Junior</option>
<option value='midlevel'>Mid-Level</option>
<option value='senior'>Senior</option>
</select>
This snippet of JSX code, which should be placed inside the SalaryCalculator component's return statement, creates a dropdown menu for selecting the skill level.
<label htmlFor='experience'>Years of Experience:</label>
<input type='number' id='experience' value={experience} onChange={(e) => setExperience(Number(e.target.value))} min='0' />
This snippet provides an input field for specifying years of experience. It also ensures the experience input state is updated with a number when the user types into the field.
<label htmlFor='location'>Location:</label>
<input type='text' id='location' value={location} onChange={(e) => setLocation(e.target.value)} />
This code creates an input field for the user to enter their location. This input field also updates the location state when changed.
<button onClick={calculateSalary}>Calculate</button>
<p>Calculated Salary: $ {salary.toLocaleString()}</p>
This snippet adds a button that, when clicked, triggers the calculateSalary function. It also displays the formatted calculated salary.
body {
margin: 20px;
font-family: Arial, sans-serif;
}
button {
margin: 10px 0;
padding: 10px 15px;
font-size: 16px;
}
label, select, input {
display: block;
margin: 10px 0;
}
This CSS code styles the body, button, label, select and input elements to give the Salary Calculator a basic visual layout.