JSFiddle - React, Tailwind, and code Playground

by shanejones

JavaScript

var squ_area = 0,
        cir_area = 0,
        tri_area = 0,
        active = 'square',
        depth_table = [
            [16, 18, 16, 16],
            [16, 18, 16, 16],
            [24, 24, 20, 20],
            [0, 0, 30, 30],
            [0, 0, 30, 30]
        ],
        area_table = [
            [30, 27, 30, 30],
            [30, 27, 30, 30],
            [20, 20, 24, 24],
            [0, 0, 16, 16],
            [0, 0, 16, 16]
        ]
    base = 0, type = 0, depth = depth_table[base][type], areas = area_table[base][type], trade_packs = 0, diy_kits = 0;

    function calculateArea(shape, x, y) {
        if (shape == 'square') {
            return x * y;
        }
        if (shape == 'circle_dia') {
            return Math.round((Math.PI * (x / 2) * (x / 2)) * 100) / 100;
        }
        if (shape == 'circle_cir') {
            return +Math.fround((x * x) / (Math.PI * 4)).toFixed(1);
        }
        if (shape == 'triangle') {
            return 0.5 * x * y;
        }
    };

    function updateCalculation() {
        var area = 0;
        switch (active) {
            case 'square':
                area = squ_area;
                break;
            case 'circle':
                area = cir_area;
                break;
            case 'triangle':
                area = tri_area;
                break;
        }
        diy_kits = Math.ceil(area * 2 / 16 * depth);
        trade_packs = Math.ceil(area / 30 / 16 * depth);
        $('.trade-packs span').html(trade_packs + " <small>This covers: " + (areas * trade_packs) + "m<sup>2</sup></small>");
        if (area >= 30) {
            $('.diy-kits span').html(0 + " <small>This covers: " + (diy_kits * .5) + "m<sup>2</sup></small>");
        } else {
            $('.diy-kits span').html(diy_kits + " <small>This covers: " + (diy_kits * .5) + "m<sup>2</sup></small>");
        }
    }
    $('.' + $('.shape').val()).show();
    $('.shape').on('change', function() {
        $('.square').hide();
       ...