JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.js"></script>
<body>
     <h1>Locate a Stronghold</h1>

    <p>Using only two throws of an <a href="http://www.minecraftwiki.net/wiki/Eye_of_ender">Eye of Ender</a>, one can locate the closest <a href="http://www.minecraftwiki.net/wiki/Stronghold">Stronghold</a>. This <a href="http://www.minecraftforum.net/topic/1458485-how-to-find-a-stronghold-only-two-eyes-of-ender-needed/page__st__80#entry21025537">forum post</a> explains what this tool does and how to use it.</p>
    <table id="locate-table">
        <tr>
            <th>Location</th>
            <th>x</th>
            <th>z</th>
            <th>f</th>
        </tr>
        <tr>
            <td>1</td>
            <td>
                <input type="text" id="locate-x1" class="locate-input" />
            </td>
            <td>
                <input type="text" id="locate-z1" class="locate-input" />
            </td>
            <td>
                <input type="text" id="locate-f1" class="locate-input" />
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>
                <input type="text" id="locate-x2" class="locate-input" />
            </td>
            <td>
                <input type="text" id="locate-z2" class="locate-input" />
            </td>
            <td>
                <input type="text" id="locate-f2" class="locate-input" />
            </td>
        </tr>
        <tr>
            <td>Result</td>
            <td id="locate-x-result" class="locate-output"></td>
            <td id="locate-z-result" class="locate-output"></td>
            <td>
                <input type="button" id="locate-clear" value="Clear" />
                <input type="button" id="locate-to-guess" value="Plot all" />
            </td>
        </tr>
    </table>
    <hr />
     <h1>Where are the other two Strongholds?</h1>

    <p>Strongholds are always 120 degrees apart relative to the point of origin. Using this truth, one can use...

CSS

html {
    background: #ffffff;
    color: #224;
    font-family: helvetica neue, roboto, sans-serif;
    font-weight: 400;
    text-shadow: -1px 1px rgba(255, 255, 255, 0.5);
}
body {
    width: 90%;
    max-width: 1024px;
    margin: auto;
}
a {
    text-decoration: none;
    color: #007fff;
    font-weight: 200;
}
a:focus, a:hover {
    text-decoration: underline;
}
h1 {
    margin: .2em 0;
    font-weight: 100;
}
table {
    width: 100%;
}
.locate-input, .locate-output, .guess-input, .guess-output {
    font-family: monospace;
}
td {
    padding: 4px;
}
table {
    border-collapse: collapse;
}
.locate-input, .guess-input {
    width: 90%;
    padding: .5em;
    text-align: center;
}
.known {
    color: #0f0;
}
.clockwise {
    color: #f00;
}
.counterclockwise {
    color: #00f;
}
#guess-graph {
    padding: 5px;
    background-color: #777;
    display: inline-block;
}
svg {
    background-color: #fff;
}

JavaScript

function locateStronghold(location1, location2) {
    var x1 = -location1.x;
    var z1 = -location1.z;
    var f1 = Math.tan(radians(-location1.f));
    var x2 = -location2.x;
    var z2 = -location2.z;
    var f2 = Math.tan(radians(-location2.f));

    var tmp_z1 = f1 * z1;
    var tmp_z2 = f2 * z2;

    tmp_z1 = tmp_z1 - x1;

    tmp_z1 = x2 + tmp_z1;
    tmp_z1 = tmp_z2 - tmp_z1;

    var tmp_f1 = f1 - f2;

    var z = tmp_z1 / tmp_f1;
    var tmp = f2 * (z + z2);
    var x = tmp - x2;

    return {
        x: x,
        z: z
    };
}

function rotateStrongholdLocation(location, direction) {
    var r = radians((direction == 'clockwise' ? -1 : 1) * 120);

    return {
        x: Math.cos(r) * location.x + -Math.sin(r) * location.z,
        z: Math.sin(r) * location.x + Math.cos(r) * location.z
    };
}

function guessStrongholdLocations(location) {
    return {
        current: location,
        clockwise: rotateStrongholdLocation(location, 'clockwise'),
        counterclockwise: rotateStrongholdLocation(location, 'counterclockwise')
    };
}

function radians(degrees) {
    return degrees * (Math.PI / 180);
}

function filterResult(result) {
    if (isNaN(result) || result == Infinity || result == -Infinity) {
        return '-';
    }
    return Math.round(result);
}

// Keep these elements in memory so queries aren't made left and right.
var locateTable = $('#locate-table');
var locateX1 = locateTable.find('#locate-x1');
var locateZ1 = locateTable.find('#locate-z1');
var locateF1 = locateTable.find('#locate-f1');
var locateX2 = locateTable.find('#locate-x2');
var locateZ2 = locateTable.find('#locate-z2');
var locateF2 = locateTable.find('#locate-f2');
var locateXResult = locateTable.find('#locate-x-result');
var locateZResult = locateTable.find('#locate-z-result');
var locateInput = locateTable.find('.locate-input');
var locateToGuess = locateTable.find('#locate-to-guess');

var guessTable = $('#guess-table');
var guessX = guessTable.find('#guess-x');
var...