JSFiddle - React, Tailwind, and code Playground
HTML
<h1>Cinematographic shutter formula</h1>
<blockquote>Where E = shutter speed (reciprocal of exposure time in seconds), F = frames per second, and S = shutter angle:
<img class="tex" alt="E = \frac {F \cdot 360^\circ}{S}" src="http://upload.wikimedia.org/math/6/6/0/660e61b5bfc4d8066975148b289225e1.png">, for <i>E</i> in reciprocal seconds<br>
<img class="tex" alt="S = \frac {F \cdot 360^\circ}{E}" src="http://upload.wikimedia.org/math/5/5/c/55ca3a4c63e1ebbffe341cc3b602600b.png">
</blockquote>
<form action="javascript:">
<p>
<label for=e>Shutter speed:</label>
<input type=number id=e name=e value="1.0" step="0.1" min="0">
(reciprocal of exposure time in seconds)
</p>
<p>
<label for=f>Frames per second:</label>
<!--<input type=number id=f name=f value="1.0" step="0.1" max="360" min="0"> -->
<select type=number id=f name=f>
<option value="23.976"> 23.976</option>
<option value="30"> 30</option>
<option value="60"> 60</option>
</select>
</p>
<p>
<label for=s>Shutter angle:</label>
<!-- <input type=number id=s name=s value="1.0" step="0.1" min="0">° -->
<select type=number id=s name=s>
<option value="180"> 180°</option>
<option value="90"> 90°</option>
<option value="45"> 45°</option>
</select>
</p>
<p>
<button type=submit>Calculate</button>
<input type="reset" value="Reset">
</p>
<p id=results hidden>
Results: <output></output>
</p>
</form>
CSS
h1 {
font-weight: bold;
font-size:2em;
}
JavaScript
document.forms[0].onsubmit = function(e){
document.getElementById('results').hidden = false;
var sum = document.getElementById('e').valueAsNumber
+ document.getElementById('f').valueAsNumber
+ document.getElementById('s').valueAsNumber;
document.querySelector('#results output').value = sum;
};
document.forms[0].onreset = function(e){
document.getElementById('results').hidden = true;
document.querySelector('#results output').value = '';
};