JSFiddle - React, Tailwind, and code Playground

by dylancorvidae

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="src/reset.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="src/main.css">
  <title>Aerial Characteristic Load Estimator</title>
</head>
<body>

  <form id="load-calculator">
    <p>
      <label for="performer-mass">Please Enter Performer(s) Weight (lbs)</label>
      <input id="performer-mass" required name="performer-mass" type="number" min="1">
    </p>
    <p>
      <label for="apparatus-mass">Please Enter Apparatus Weight (lbs)</label>
      <input id="apparatus-mass" required name="apparatus-mass" type="number" min="1">
    </p>
    <p>
      <label for="dynamic-factor">Please Choose An Apparatus <br>(Dynamic Adjustment Factor)</label>
      <select id="dynamic-factor" required name="dynamic-factor">
        <option value="1.5">Aerial Yoga (1.5)</option>
        <option value="2">Silks (2 for drops less than 3ft.)</option>
        <option value="3">Static Trapeze (3)</option>
        <option value="3">silks (3 for drops 3-8ft.)</option>
        <option value="5">Rope (5)</option>
        <option value="5">Straps (5)</option>
      </select>
    </p>
    <p>
      <input type="submit" onClick="characteristicLoad" value="Calculate">
    </p>
    <p>
      <label for="result">Estimated Characteristic Load</label>
      <input for="load-calculator" id="result">
    </p>
  </form>

  <script type="module" src="src/loadCalculator.js"></script>

</body>
</html>

CSS

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0px;
  font-family: 'Roboto Condensed', sans-serif;
}

p {
  display: flex;
  flex-direction: column;
  margin: 30px;
}

label {
  font-size: 1.5em;
}

input {
  font-size: 1.5em;
  border: 1px solid black;
  width: 400px;
}

select {
  font-size: 1.5em;
  border: 1px solid black;
  width: 400px;
}

JavaScript

export function characteristicLoad() {
  const performerMass = document.getElementById('performer-mass').value;
  const apparatusMass = document.getElementById('apparatus-mass').value;
  const totalMass = performerMass + apparatusMass;
  const dynamicFactor = document.getElementById('dynamic-factor').value;
  let result = document.getElementById('result');
  let characteristicLoad = totalMass * dynamicFactor * 6;
  result.value = characteristicLoad;
}