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.