JSFiddle - React, Tailwind, and code Playground

by john_s

HTML

<div id="calculator">
    <div style="overflow:hidden;">
        <div style="float:left;">
            <h3>Country</h3>
            <select id="country"></select>
        </div>
        <div style="float:left;">
            <h3>Grade</h3>
            <select id="grade"></select>
        </div>
    </div>
    <button id="convert">Calculate</button>
    <div id="conversions"></div>
</div>

JavaScript

var COUNTRIES = [
    {
        name: "UK",
        grades: [
            { name: "1", count: 3 },
            { name: "2", count: 2 },
            { name: "3", count: 2 },
            { name: "4a", count: 1 },
            { name: "4b", count: 1 },
            { name: "4c", count: 2 },
            { name: "5a", count: 2 },
            { name: "5b", count: 2 },
            { name: "5c", count: 3 },
            { name: "6a", count: 4 },
            { name: "6b", count: 3 },
            { name: "6c", count: 3 },
            { name: "7a", count: 2 },
            { name: "7b", count: 5 }
        ]
    },
    {
        name: "France",
        grades: [
            { name: "1", count: 3 },
            { name: "2", count: 2 },
            { name: "3", count: 1 },
            { name: "4a", count: 1 },
            { name: "4b", count: 1 },
            { name: "4c", count: 1 },
            { name: "5a", count: 1 },
            { name: "5b", count: 1 },
            { name: "5c", count: 1 },
            { name: "6a", count: 1 },
            { name: "6a+", count: 1 },
            { name: "6b", count: 1 },
            { name: "6b+", count: 2 },
            { name: "6c", count: 1 },
            { name: "6c+", count: 1 },
            { name: "7a", count: 1 },
            { name: "7a+", count: 1 },
            { name: "7b", count: 1 },
            { name: "7b+", count: 1 },
            { name: "7c", count: 1 },
            { name: "7c+", count: 1 },
            { name: "8a", count: 1 },
            { name: "8a+", count: 1 },
            { name: "8b", count: 1 },
            { name: "8b+", count: 1 },
            { name: "8c", count: 1 },
            { name: "8c+", count: 1 },
            { name: "9a", count: 1 },
            { name: "9a+", count: 1 },
            { name: "9b", count: 1 },
            { name: "9b+", count: 1 }
        ]
    },
    {
        name: "USA",
        grades: [
            { name: "3", count: 1 },
            { name: "4", count: 1 },
            { name:...