JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<head lang="en">
</head>
<body>

    <!--Display the title image-->
    <div id="title"><img src="images/titleImage.png"><img></div>

    <!--Display the input forms-->

    <div id="inputFormWrapper">
        <p>Enter your known values below, and the rest will be calculated instantly!</p>

        <form>
<b>a</b>:  <input type="number" step="0.01" id="cathetusA" onkeyup="calculate();">     ∠ <b>A</b>: <input type="number" step="0.01" id="angleA" onkeyup="calculate(angleA);"><br><br>
<b>b</b>:  <input type="number" step="0.01" id="cathetusB" onkeyup="calculate();">     ∠ <b>B</b>: <input type="number" step="0.01" id="angleB" onkeyup="calculate(amgleB);"><br><br>
<b>c</b>:  <input type="number" step="0.01" id="hypotenuse" onkeyup="calculate(hypotenuse);">    ∠ <b>C</b>: <input type="number" step="0.01" id="angleC" value="90" onkeyup="calculate(angleC);" readonly><br>
</form>
</div>

<!--Display the reference triangle image-->
<div id="refImage"><img src="images/rightTri.jpg"></div>

</body>
</html>

CSS

body {
    background-color: #404040;
    font-family: Sans-serif;
}

#title {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 25px;
}

#inputFormWrapper {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px;
    color: white;
}

input[type=number] {
    -webkit-transition: box-shadow .3s ease-in-out, border-color .3s ease-in-out;
    transition: box-shadow .3s ease-in-out, border-color .3s ease-in-out;
    outline: none;
    padding: 5px 0px 5px 5px;
    margin: 5px 1px 3px 0px;
    border: 2px solid #a7a7a7;
    border-radius: 8px;
}

input[type=number]:focus {
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    padding: 5px 0px 5px 5px;
    margin: 5px 1px 3px 0px;
    border-radius: 8px;
    border: 2px solid rgb(191, 46, 32);
    box-shadow: 0 0 10px rgb(255, 54, 44);
}

#refImage {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-left: 50px;
    padding-top: 25px;
}

JavaScript

/**
 * Created by Elias on 03-12-2014.
 */

var cathetusA = document.getElementById("cathetusA");
var cathetusANumber;
var cathetusB = document.getElementById("cathetusB");
var cathetusBNumber;
var hypotenuse = document.getElementById("hypotenuse");
var hypotenuseNumber;
var angleA = document.getElementById("angleA");
var angleANumber;
var angleB = document.getElementById("angleB");
var angleBNumber;
var angleC = 90;

/*This is where all the math functions go*/
function getNumbers() {
    if (document.getElementById("cathetusA").value != undefined) {
        cathetusANumber = parseFloat(document.getElementById("cathetusA").value);
    }

    if (document.getElementById("cathetusB").value != undefined) {
        cathetusBNumber = parseFloat(document.getElementById("cathetusB").value);
    }

    if (!document.getElementById("hypotenuse").value == "") {
        hypotenuseNumber = parseFloat(document.getElementById("hypotenuse").value);
    }

    if (!document.getElementById("angleA").value == "") {
        angleANumber = parseFloat(document.getElementById("angleA").value);
    }

    if (!document.getElementById("angleB").value == "") {
        angleBNumber = parseFloat(document.getElementById("angleB").value);
    }
}

function draw() {
    cathetusB.value = cathetusANumber;
}

function calculate() {
    getNumbers();
    draw();
}