JSFiddle - React, Tailwind, and code Playground

by trentHarlem

HTML

<div id="container">
  <form>
    <h1>Future Salary</h1>
    <p id="description">
      Calculate a future salary based on a starting salary, <br />
      and an assumed % increase over a period of years.
    </p>
    <div class="form_element">
      <label for="currentSalary">Starting Salary: </label>
      <!-- give this field focus onload -->
      <input type="text" id="currentSalary" name="currentSalary" autofocus />
      <!-- how move autofocus after text is entered ? -->
    </div>
    <div class="form_element">
      <label for="percentIncrease">% Increase: </label>
      <input type="text" id="percentageIncrease" name="percentIncrease" />
    </div>
    <div class="form_element">
      <label for="years"># Years: </label>
      <input type="text" id="numberOfYears" name="years" />
    </div>
    <input type="submit" value="Submit" id="submit" class="btn" />
    <p id="targetSalaryDisplay"></p>


    <!--  add links to helpful information -->
    <!-- info:  salary ranges for different job titles  -->
  </form>
</div>

CSS

/* add styling */
/*  some rough styles  */

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #f1f1f1;
}

#container {
  margin: auto;
  width: 100%;
  min-width: 420px;
}

h1 {
  font: bold 2em system-ui;
  margin: 5px;
  padding: 5px;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#description {
  margin-bottom: 20px;
  font-size: 18px;
}

.form_element {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 0px;
  /* adjust spacing  betwen label and input*/
  padding: 10px;

}

/* use flexbox to space out label and input */
label {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  /* justify-content: center; */
  /* set width to fit the text */
  /* width: 200px; */
  /* adjust spacing  betwen label and input*/
  padding: 8px;
}

/*  style for the input text field */
input[type=text] {
  /* set width to fit the text */
  width: 200px;
  /* set border to 1px solid black */
  border: 1px solid black;
  /* set padding */
  padding: 10px;
  /* set margin */
  /* margin: 5px; */
  /* set border-radius */
  border-radius: 5px;
  /* adjust spacing  betwen label and input*/
  padding: 5px;
}



/*  style for the input text field when focus */
input[type=text]:focus {
  background-color: lightblue;
  /* transform to increaase scale */
  transform: scale(1.1);
}


/*  style for the submit button */
.btn {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

/* style the display */
#targetSalaryDisplay {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

JavaScript

/* function salaryIncrease(currentSalary, percentageIncrease, numberOfYears) {

    let salary = currentSalary;

    for (let i = 1; i <= numberOfYears; i++) {

        salary += salary * (percentageIncrease / 100);

    }

    //round to whole number

    return salary.toFixed(0);

}   

 */
// write a function that takes 3 number as parameters, 1. a number representing the 'current salary' 2. a number representing the percentage increase and 3. the number of years. the function should return a number representing the new salary after the increase for the specified number of years. for example, if the current salary is 1000, the percentage increase is 10% and the number of years is 5, then the function should return 1610.51. 





//  we will use the HTML form index.html to get the values from the user.

// get form elements
const currentSalaryElem = document.getElementById('currentSalary')
const percentageIncreaseElem = document.getElementById('percentageIncrease')
const numberOfYearsElem = document.getElementById('numberOfYears')
const form = document.getElementById('form')
const submit = document.getElementById('submit')
const display = document.getElementById('targetSalaryDisplay')

// we will print those values to the screen. lets write a helper function for that.
function updateSalaryDisplay(currentSalary, percentageIncrease, numberOfYears, salary, difference) {
  console.log(currentSalary, percentageIncrease, numberOfYears);
  // return a readable string literal
  display.innerHTML = `Assuming annual pay raises of ${percentageIncrease}% per year, after ${numberOfYears} years,<br /> your salary will have increased from ${currentSalary} to ${salary}. A difference of ${difference}.`  
}

// refactor the salary function for readility. use helper functions and descriptive variables.
function salaryIncrease(currentSalary, percentageIncrease, numberOfYears) {
  let salary = calculateSalary(currentSalary, percentageIncrease, numberOfYears)
  let difference =...