JSFiddle - React, Tailwind, and code Playground

by Professor Tom DeDonno

HTML

Estimate: <span id="estimate">estimate</span>
<form id="estimateform">
            <fieldset>
               <legend><span>Photography</span></legend>
               <input type="number" min="0" max="4" id="photoNum" />
               <label for="photoNum">
                  <p># of photographers (1&#8209;4)</p>
                  <p>$100/hr</p>
               </label>

               <input type="number" min="2" id="photoHrs" value="2" />
               <label for="photoHrs">
                  <p># of hours to photograph (minimum&nbsp;2)</p>
               </label>

               <input type="checkbox" id="makeBook" checked />
               <label for="makeBook">
                  <p>Memory book</p>
                  <p>$350</p>
               </label>

               <input type="checkbox" id="photoRights" />
               <label for="grantRights">
                  <p>Reproduction rights for all photos</p>
                  <p>$1250</p>
               </label>
            </fieldset>
            <fieldset>
               <legend><span>Travel</span></legend>
               <input type="number" id="photoDist" min="0" />
               <label for="photoDist">
                  <p>Event distance from Austin, TX</p>
                  <p>$2/mi per photographer</p>
               </label>
            </fieldset>
         </form>

JavaScript

//const is a block scoped constant
//let is block scoped
//var is function scope or global "main" functon
const EMP_COST = 100; //cost of photographers per hour
const BOOK_COST = 350; //cost of memory book 
const REPRO_COST = 1250; //cost of reproduction rights 
const TRAVEL_COST = 2; //cost of travel per mile 

function getEstimate( ) {
	let totalCost = 0; //block scoped exists only in getEstimate
  let photographers = document.getElementById("photoNum").value;
  let hours = document.getElementById("photoHrs").value;
let distance = document.getElementById("photoDist").value;
let buyBook = document.getElementById("makeBook").checked; //returns true or false
let buyRights = document.getElementById("photoRights").checked;
//hourly rate for photographers
totalCost = photographers*hours*EMP_COST;
totalCost += photographers*distance*TRAVEL_COST;
totalCost += buyBook ? BOOK_COST : 0;
totalCost += buyRights ? REPRO_COST : 0;
document.getElementById("estimate").innerHTML = "$" + totalCost;
return totalCost;
}
document.getElementById("photoNum").onchange = getEstimate;
document.getElementById("photoHrs").onchange = getEstimate
document.getElementById("photoDist").onchange = getEstimate;
document.getElementById("makeBook").onchange = getEstimate;
document.getElementById("photoRights").onchange = getEstimate;