JSFiddle - React, Tailwind, and code Playground

HTML

<form id="fov">new resolution = 
    <input type="text" id="txt1In" name="res1In" value="1920" size="5"/> x
    <input type="text" id="txt2In" name="res2In" value="1080" size="5"/>
    <br/>
    old resolution = <input type="text" id="txt3In" name="res3In" value="1024" size="5"/> x 
    <input type="text" id="txt4In" name="res4In" value="768" size="5"/>
     old fov = <input type="text" id="txtDv" name="fovdefault" size="2" value="90"/>
</form>

new fov = <span id="fovOutspan"></span>

JavaScript

function calc() {
fov1 = parseInt($('#fov input[name=res1In]').val());
fov2 = parseInt($('#fov input[name=res2In]').val());
fov3 = parseInt($('#fov input[name=res3In]').val());
fov4 = parseInt($('#fov input[name=res4In]').val());
fovd = parseInt($('#fov input[name=fovdefault]').val());
fovmon = (fov1/fov2)/(fov3/fov4);
radian = Math.PI/180;
degree = 180/Math.PI;

fovOutval = Math.round((2*Math.atan(fovmon*Math.tan(fovd/2*radian)))*degree*Math.pow(10,2))/Math.pow(10,2);

$('#fovOutspan').html(fovOutval);
}

$(document).ready(function(){ 
    calc();
    $('input').keyup( function() {
        calc(); 
    });
});