JSFiddle - React, Tailwind, and code Playground

by sambeckhamdesign

HTML

<form action="#">
<section class="category dev">
            <h2>Section 2</h2>
            <p>Another section with multiple options and clickable text</p>
            <ul>
                <li>
                <label for="siioi">
                    <input id="siioi" class="test" name="siioi" type="checkbox" value="2"/>
                    <h3>Add this to your total</h3>
                    <span class="pnd">40</span>
                </label>
                </li>
                <li>
            <label for="sivoi">
                <input id="sivoi" name="sivoi" type="number" min="0" max="10" value="0" time="1.5">
                <h3>Pages need to be editable</h3>
                <span class="pnd">0</span>
            </label>
        </li><li>
            <label for="sivoii">
                <input id="sivoii" name="sivoii" type="number" min="0" max="10" value="0" time="3">
                <h3>Pages need to be editable</h3>
                <span class="pnd">0</span>
            </label>
        </li>
                <li>
                <label for="siioiii">
                    <input id="siioiii" name="siioiii" type="checkbox" value="1"/>
                    <h3>This is cheaper than the others</h3>
                    <span class="pnd">20</span>
                </label>
                </li>
                <li>
                <label for="siioiv">
                    <input id="siioiv" name="siioiv" type="checkbox" value="2.5"/>
                    <h3>This one is more expensive</h3>
                    <span class="pnd">50</span>
                </label>
                </li>
            </ul>
</section>
    <section class="category out">
            <h2>Section 3</h2>
            <p>In this section you can choose only one option</p>
            <ul>
                <li>
                    <input type="radio" name="section3" value="2" />
                    <h3>Add this to your total</h3>
                    <span class="pnd">40</span>
                </li>
...

CSS

#total{display:block;font-size:3em;clear:both;margin-top:100px;}
#total:before{content:"£";}
form{margin:20px auto -80px;}
.category{display:block;padding:2% 4%;width:90%;background-color: #ccc;background-image: -moz-linear-gradient(top, #ddd, #ccc);background-image: -ms-linear-gradient(top, #ddd, #ccc);background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ddd), to(#ccc));background-image: -webkit-linear-gradient(top, #ddd, #ccc);background-image: -o-linear-gradient(top, #ddd, #ccc);background-image: linear-gradient(top, #ddd, #ccc);background-repeat: repeat-x;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#cccccc', GradientType=0);-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
box-shadow:inset 0 -1px 5px rgba(0,0,0,0.1);
}
.category li{width:100%;padding:5px 0}
.category li:hover{background:rgba(255, 255, 255, 0.2);}
.category li+li{border-top:1px dashed #666;}
.category ul{width:100%;border-top:1px solid #ccc;margin:5px 0}
input,h3,.category span{display:inline-block;}
.category span{color:#333;font-style:italic;float:right}

.test{background:#f0f !important;}

JavaScript

var userStorage = [0, 0, 0, 0];
var hours = [0, 0, 0, 0, 0];

function calculateTotal() {
    var total = 0;
    var uTotal = 0;
    hours = [0, 0, 0, 0, 0];
    $('.des input:checked').each(function() {
        hours[0] = hours[0] + parseFloat($(this).val());
    });
    $('.dev input:checked').each(function() {
        hours[1] = hours[1] + parseFloat($(this).val());
    });
    $('.ext input:checked').each(function() {
        hours[2] = hours[2] + parseFloat($(this).val());
    });
    $('.out input:checked').each(function() {
        hours[3] = hours[3] + (parseFloat($(this).val())) / 20;
    });
    $('.hid input:checked').each(function() {});
    for (var i = 0; i < hours.length; i++) {
        total += hours[i];
    }
    for (var o = 0; o < userStorage.length; o++) {
        uTotal += userStorage[o];
    }
    total = total * 20;
    $("#total").text(Math.floor(total + uTotal));
}

console.log("hello");

function userInput(name, cat) {
    var result = parseFloat($('#' + name).val());
    var time = parseFloat($('#' + name).attr('time'));

    console.log(result);

    switch (cat) {
    case "des":
        cat = 0;
        break;
    case "dev":
        cat = 1;
        break;
    case "ext":
        cat = 2;
        break;
    case "out":
        cat = 3;
        break;
    default:
        cat = 4;
    }
    
    userStorage[cat] = userStorage[cat] - parseFloat($('label[for=' + name + '] span').text());
    
    switch (result) {
    case 1 :
        result = result * 2;
        break;
    case 2:
        result = result * 1.5;
        break;
    case 3:
        result = result * 1.2;
        break;
    default:
        result = result;
    }
        userStorage[cat] = userStorage[cat] + (result * 20 * time);
        $('label[for=' + name + '] span').text(result * 20 * time);
}

$(document).ready(calculateTotal());

$('input[type=number]').change(function() {
    userInput(this.id, this.parents(".category").class());
});

$('input').change(function()...