JSFiddle - React, Tailwind, and code Playground

by Richard Ayotte

HTML

<label>
    <input type="radio" name="einheit" value="degree" checked>Degree</label>
</li>
<label>
    <input type="radio" name="einheit" value="radian">Radian</label>
</li>
<table style="margin-top: 1em">
    <thead>
        <tr>
            <th>Form</th>
            <th>Degree/RAD</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Form 1</td>
            <td class='value'>180</td>
        </tr>
        <tr>
            <td>Form 2</td>
            <td class='value'>360</td>
        </tr>
        <tr>
            <td>Form 3</td>
            <td class='value'>540</td>
        </tr>
        <tr>
            <td>Form 4</td>
            <td class='value'>720</td>
        </tr>
        <tr>
            <td>Form 5</td>
            <td class='value'>900</td>
        </tr>
        <tr>
            <td>Form 6</td>
            <td class='value'>1080</td>
        </tr>
        <tr>
            <td>Form 7</td>
            <td class='value'>1260</td>
        </tr>
        <tbody>
</table>

JavaScript

$(document).ready(function () {
    var to = {
        degree: function () {
            var rad = parseInt($(this).text(), 10);
            $(this).text((rad * 180));
        },
        radian: function () {
            var deg = parseInt($(this).text(), 10);
            $(this).text((deg / 180) + 'Pi');
        }
    };
    $('input[type="radio"]').click(function () {
        var unit = $(this).attr("value");
        $('td.value').each(to[unit]);
    });
});