JSFiddle - React, Tailwind, and code Playground

by Nick Silva

HTML

<form id="calculator" action="#" method="get">
     <h1>Cake Cost Estimator</h1>

     <h3>Round Cakes:</h3>

    <fieldset id="round">
        <table>
            <tr>
                <td>
                    <label>6" Round Cake (6-8):</label>
                </td>
                <td>
                    <input id="6round" type="text" class="subtotal" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>8" Round Cake (12-15):</label>
                </td>
                <td>
                    <input id="8round" type="text" class="subtotal" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>9" Round Cake (20-24):</label>
                </td>
                <td>
                    <input id="9round" type="text" class="subtotal" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>10" Round Cake (26-30):</label>
                </td>
                <td>
                    <input id="10round" type="text" class="subtotal" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>12" Round Cake (34-38):</label>
                </td>
                <td>
                    <input id="12round" type="text" class="subtotal" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>14" Round Cake (46-50):</label>
                </td>
                <td>
                    <input id="14round" type="text" class="subtotal" placeholder=0>
                </td>
            </tr>
        </table>
    </fieldset>
     <h3>Square Cakes:</h3>

    <fieldset id="square">
        <table>
            <tr>
                <td>
                    <label>6" Square Cake (8-10):</label>
                </td>
                <td>
                   ...

JavaScript

//Prices

$(document).ready(function () {
    //apparently you can't declare a variable with a number and letter
    var sixround = 39.95;
    var eightround = 45.95;
    var nineround = 52.95;
    var tenround = 60.95;
    var twelveround = 74.95;
    var fourteenround = 89.95;

    var sixsquare = 45.95;
    var eightsquare = 52.95;
    var ninesquare = 60.95;
    var tensquare = 74.95;
    var twelvesquare = 99.95;
    var fourteensquare = 116.95;

    var quarterSheet = 37.95;
    var halfSheet = 62.94;
    var fullSheet = 95.95;

    var basicCupcake = 2.25;
    var standardCupcake = 2.50;
    var premiumCupcake = 2.75;

    //Round cakes
    $("#6round").change(function () {
        //get the value of the key you just entered
        var six = $("#6round").val();
        //multiply the value by the amount
        $(this).val((sixround * six).toFixed(2));
    });
    $("#8round").change(function () {
        var eight = $("#8round").val();
        $(this).val((eightround * eight).toFixed(2));

    });
    $("#9round").change(function () {
        var nine = $("#9round").val();
        $(this).val((nineround * nine).toFixed(2));
    });
    $("#10round").change(function () {
        var ten = $("#10round").val();
        $(this).val((tenround * ten).toFixed(2));
    });
    $("#12round").change(function () {
        var twelve = $("#12round").val();
        $(this).val((twelveround * twelve).toFixed(2));
    });
    $("#14round").change(function () {
        var fourteen = $("#14round").val();
        $(this).val((fourteenround * fourteen).toFixed(2));
    });

    //Square Cakes
    $("#6square").change(function () {
        var sixs = $("#6square").val();
        $(this).val((sixsquare * sixs).toFixed(2));
    });
    $("#8square").change(function () {
        var eights = $("#8square").val();
        $(this).val((eightsquare * eights).toFixed(2));
    });
    $("#9square").change(function () {
        var nines = $("#9square").val();
       ...