nielsadb/percentages.html

## percentages.html
<html>
<head>
  <style>
  body, input {
    font-family: -apple-system, "Helvetica Neue", sans-serif;
  }
  fieldset {
    width: 10em;
    margin: 20px;
    border: 0 none;
  }
  fieldset div {
    margin: 4px 0;
    display: flex;
    align-items: center;
  }
  label {
    order: 1;
    width: 10em;
    text-align: right;
    padding-right: 0.5em;
    user-select: none;
    cursor: pointer;
  }
  input {
    width: 5em;
    order: 2;
    flex: 1 1 auto;
    text-align: right;
  }
  input:focus ~ label {
    color: #933;
  }
  </style>
  <script>
    const percentages = [ 1.00, 0.95, 0.93, 0.90, 0.87, 0.85, 0.83, 0.80, 0.77, 0.75 ]

    const getMaxAndReps = function() {
      const oneRM = parseInt(document.getElementById("1rm").value)
      const reps = parseInt(document.getElementById("reps").value)
      if (isNaN(oneRM) || isNaN(reps) || reps < 1 || reps > 10) return
      return [oneRM, reps]
    }

    const calcPercentage = function() {
      const oneRMandReps = getMaxAndReps()
      const weight = parseInt(document.getElementById("weight").value)
      if (isNaN(weight) || !oneRMandReps) return
      document.getElementById("percentage").value =
        Math.ceil(100 * weight / oneRMandReps[0] / percentages[oneRMandReps[1]-1])
    }

    const calcWeight = function() {
      const oneRMandReps = getMaxAndReps()
      const percentage = parseInt(document.getElementById("percentage").value)
      if (isNaN(percentage) || !oneRMandReps) return
      document.getElementById("weight").value =
        Math.ceil((percentage/100) * percentages[reps-1] * oneRM)
    }

    window.onload = function() {
      document.getElementById("1rm").addEventListener("input", calcPercentage)
      document.getElementById("reps").addEventListener("input", calcPercentage)
      document.getElementById("weight").addEventListener("input", calcPercentage)
      document.getElementById("percentage").addEventListener("input", calcWeight)
      calcPercentage()
    }
  </script>
</head>
<body>
  <form>
    <fieldset>
      <div>
        <input required type="number" min="20" step="10" value="150" id="1rm" name="1rm"/>
        <label for="1rm">1RM</label>
      </div>
      <div>
        <input required type="number" min="1" max="10" value="3" id="reps" name="reps"/>
        <label for="reps">Reps</label>
      </div>
      <div>
        <input type="number" min="20" step="10" value="130" id="weight" name="weight"/>
        <label for="weight">Weight</label>
      </div>
      <div>
        <input type="number" min="10" max="100" step="1" id="percentage" name="percentage"/>
        <label for="percentage">Relative %</label>
      </div>
    </fieldset>
  </form>
</body>
</html>
	<html>
	<head>
	<style>
	body, input {
	font-family: -apple-system, "Helvetica Neue", sans-serif;
	}
	fieldset {
	width: 10em;
	margin: 20px;
	border: 0 none;
	}
	fieldset div {
	margin: 4px 0;
	display: flex;
	align-items: center;
	}
	label {
	order: 1;
	width: 10em;
	text-align: right;
	padding-right: 0.5em;
	user-select: none;
	cursor: pointer;
	}
	input {
	width: 5em;
	order: 2;
	flex: 1 1 auto;
	text-align: right;
	}
	input:focus ~ label {
	color: #933;
	}
	</style>
	<script>
	const percentages = [ 1.00, 0.95, 0.93, 0.90, 0.87, 0.85, 0.83, 0.80, 0.77, 0.75 ]

	const getMaxAndReps = function() {
	const oneRM = parseInt(document.getElementById("1rm").value)
	const reps = parseInt(document.getElementById("reps").value)
	if (isNaN(oneRM) \|\| isNaN(reps) \|\| reps < 1 \|\| reps > 10) return
	return [oneRM, reps]
	}

	const calcPercentage = function() {
	const oneRMandReps = getMaxAndReps()
	const weight = parseInt(document.getElementById("weight").value)
	if (isNaN(weight) \|\| !oneRMandReps) return
	document.getElementById("percentage").value =
	Math.ceil(100 * weight / oneRMandReps[0] / percentages[oneRMandReps[1]-1])
	}

	const calcWeight = function() {
	const oneRMandReps = getMaxAndReps()
	const percentage = parseInt(document.getElementById("percentage").value)
	if (isNaN(percentage) \|\| !oneRMandReps) return
	document.getElementById("weight").value =
	Math.ceil((percentage/100) * percentages[reps-1] * oneRM)
	}

	window.onload = function() {
	document.getElementById("1rm").addEventListener("input", calcPercentage)
	document.getElementById("reps").addEventListener("input", calcPercentage)
	document.getElementById("weight").addEventListener("input", calcPercentage)
	document.getElementById("percentage").addEventListener("input", calcWeight)
	calcPercentage()
	}
	</script>
	</head>
	<body>
	<form>
	<fieldset>
	<div>
	<input required type="number" min="20" step="10" value="150" id="1rm" name="1rm"/>
	<label for="1rm">1RM</label>
	</div>
	<div>
	<input required type="number" min="1" max="10" value="3" id="reps" name="reps"/>
	<label for="reps">Reps</label>
	</div>
	<div>
	<input type="number" min="20" step="10" value="130" id="weight" name="weight"/>
	<label for="weight">Weight</label>
	</div>
	<div>
	<input type="number" min="10" max="100" step="1" id="percentage" name="percentage"/>
	<label for="percentage">Relative %</label>
	</div>
	</fieldset>
	</form>
	</body>
	</html>