JSFiddle - React, Tailwind, and code Playground

by mlms13

HTML

<form action="#">
    <input type="number" id="base" />
    <input type="number" id="total" />
</form>

CSS

body {
    background: #333;
    color: #fff;
    font-family: sans-serif;
}
input[type="text"], input[type="number"] {
    display: block;
    margin: 8px 0;
    padding: 2px;
}
input[type="checkbox"] {
    clear: left;
    float: left;
    margin: 3px 4px;
}
label {
    float: left;
    clear: right;
}

JavaScript

function FameCalc() {
    var form,
        baseInpt,
        totalInpt,
        selectionChanged = false,
        achievements,
        selected = [];

    function Achievement(name, desc, bonus, fame) {
        this.name = name;
        this.description = desc;
        this.bonus = bonus;
        this.fame = fame || 0;
    }
    
    function makeHandler(input) {
        return function () {
            selectionChanged = true;
        };
    }

    function calculateTotalFame(base) {
        var total, i;

        total = base;
        for (i = 0; i < selected.length; i++) {
            total *= selected[i].bonus;
            total += selected[i].fame;
        }
        return total;
    }
    
    function buildForm() {
        var input, label, i;
        
        for (i = 0; i < achievements.length; i++) {
            input = document.createElement('input');
            input.setAttribute('type', 'checkbox');
            input.setAttribute('id', 'inpt' + i);
            input.setAttribute('value', achievements[i].name);
            input.onchange = makeHandler(input);
            
            label = document.createElement('label');
            label.setAttribute('for', 'inpt' + i);
            label.setAttribute('title', achievements[i].description);
            label.appendChild(document.createTextNode(achievements[i].name));
            
            form.appendChild(input);
            form.appendChild(label);
        }
    }
    
    function getSelection() {
        var i = 0,
            j = 0, // keep track of checkboxes only
            inputs = form.getElementsByTagName('input');
        
        selected = [];
        for (i = 0; i < inputs.length; i++) {
            if (inputs[i].getAttribute('type') === 'checkbox') {
                if (inputs[i].checked) {
                    selected.push(achievements[j]);
                }
                j++;
            }
        }
    }

    this.initialize = function() {
        form =...