Freelancing Rate Calculator

A React component that takes in various inputs, such as experience, skills, and market rates, to calculate an optimal freelancing rate.

import React, { useState } from 'react';

function FreelancingRateCalculator() {
  const [experience, setExperience] = useState(0);
  const [skillLevel, setSkillLevel] = useState('average');
  const [marketRate, setMarketRate] = useState(50); // Average market rate
  const [calculatedRate, setCalculatedRate] = useState(0);

  const handleCalculations = () => {
    let rate = marketRate;
    switch (skillLevel) {
      case 'junior':
        rate *= 0.8;
        break;
      case 'average':
        rate *= 1;
        break;
      case 'senior':
        rate *= 1.2;
        break;
      default:
        break;
    }
    rate += experience * 5; // Add $5 for each year of experience
    setCalculatedRate(rate);
  };

  return (
    <div>
      <input type="number" placeholder="Experience (Years)" onChange={(e) => setExperience(parseInt(e.target.value))} />
      <select onChange={(e) => setSkillLevel(e.target.value)}>
        <option value="junior">Junior</option>
        <option value="average">Average</option>
        <option value="senior">Senior</option>
      </select>
      <input type="number" placeholder="Market Rate" onChange={(e) => setMarketRate(parseInt(e.target.value))} />
      <button onClick={handleCalculations}>Calculate Rate</button>
      <p>Calculated Freelancing Rate: $ {calculatedRate.toFixed(2)}</p>
    </div>
  );
}

export default FreelancingRateCalculator;

This React component allows users to input their experience in years, select their skill level, and input the market rate to calculate their freelancing rate. The calculated rate is based on market rate and experience, significantly influenced by the user's skill level.

/* HTML in JSX format */
<input type="number" placeholder="Experience (Years)" onChange={(e) => setExperience(parseInt(e.target.value))} />
<select onChange={(e) => setSkillLevel(e.target.value)}>
  <option value="junior">Junior</option>
  <option value="average">Average</option>
  <option value="senior">Senior</option>
</select>
<input type="number" placeholder="Market Rate" onChange={(e) => setMarketRate(parseInt(e.target.value))} />
<button onClick={handleCalculations}>Calculate Rate</button>
<p>Calculated Freelancing Rate: $ {calculatedRate.toFixed(2)}</p>

This portion of JSX represents the input fields and button used to collect the user's experience, skill level, and market rate, and to calculate the freelancing rate. It also shows the output area where the calculated rate is displayed.

/* CSS styles */
.calculator {
  display: flex;
  flex-direction: column;
  max-width: 300px;
  margin: auto;
}

.calculator input, .calculator select, .calculator button {
  margin: 10px 0;
}

CSS styles for the calculator component to organize the inputs, select box, button, and calculated rate display neatly in a column, centering the content on the page and spacing the elements for better readability.