Pay Calculator

Calculate pay based on a hourly rate.

by trentHarlem

HTML

<div id="container">
   <form>
     <h1>Pay Calculator</h1>
     <p id="description">
       Calculate pay based on a hourly rate.
     </p>
     <div class="form_element">
       <label for="hourly_rate">Hourly Rate:  </label>
       <input type="text" id="hourly_rate" name="hourly_rate" autofocus />
     </div>
     <div class="form_element">
       <label for="hours_worked">Daily Hours:  </label>
      <input type="text" id="number_of_hours" name="number_of_hours" />
      <!-- <input type="range" id="number_of_hours" name="number_of_hours" step="1" min="1" max="24" value="1"/>
      <span id="hours">1</span> -->
     </div>
     <div class="form_element">
       <label for="modifier">Modifier:  </label>
       <select name="modifier" id="modifier">
         <option value="1">None</option>
         <option value="1.5">Time and a half</option>
         <option value="2">Double Time</option>
       </select>
     </div>
     <!-- <div class="form_element">
            <label for="tax_rate">Tax Rate: </label>
            <select name="tax_rate" id="tax_rate">
              <option value="0">None</option>
              <option value="0.1">10%</option>
              <option value="0.2">20%</option>
              <option value="0.3">30%</option>
              <option value="0.4">40%</option>
              <option value="0.5">50%</option>
            </select>    
            </div>  
             -->
     <!--close TAX RATE  -->
     <input type="submit" value="Submit" id="submit" class="btn" />
     <div id="display">
       <h2>Estimated Pay</h2>
       <p>Daily: <span id="daily"></span></p>
       <p>Weekly: <span id="weekly"></span></p>
       <p>Monthly: <span id="monthly"></span></p>
       <p>Yearly: <span id="yearly"></span></p>

     </div>
   </form>
 </div>

CSS

body {
  font: 20px sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #919191;
}

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

h2 {
  font: bold 1.1em system-ui;
  margin: 5px;
  padding: 0px;
}

p {
  padding:2px;
  margin: 8px;
}

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

.form_element {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 0px;
  padding: 10px;
}

label {
  padding-right: 5px;
}

input {
  width: 120px;
}

.btn {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 8px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
}

#display {
  background-color: whitesmoke;
  border-radius: 10px;
  margin: 5px;
  padding: 5px 20px;
  min-width: 200px;
}

JavaScript

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

// get form elements
const hourly_rate = document.querySelector('#hourly_rate')
const number_of_hours = document.querySelector('#number_of_hours')
const modifier = document.querySelector('#modifier')
const submit = document.querySelector('#submit')
const display = document.querySelector('#display')
const daily = document.querySelector('#daily')
const weekly = document.querySelector('#weekly')
const monthly = document.querySelector('#monthly')
const yearly = document.querySelector('#yearly')

//  event listener for form submit
submit.addEventListener('click', (e) => {
    //  prevent default form submit
    e.preventDefault()
    //  get the form values
    const rate = Number(hourly_rate.value)
    const hours = Number(number_of_hours.value)
    const mod = Number(modifier.value)
    //  calculate the pay
    const pay = rate * hours * mod
    //  display the pay
    display.style.display = 'block'
    daily.textContent = pay.toFixed(2)
    weekly.textContent = (pay * 5).toFixed(2)
    monthly.textContent = (pay * 5 * 4).toFixed(2)
    yearly.textContent = (pay * 5 * 4 * 12).toFixed(2)
})