JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

calculator.

<!--This is coded in a different way to the [punnett square] and can handle any number of traits. There are two styles to choose from. 

In the 'Trait' style, each mutant allele is presented separately, and you choose whether each parent carries 0, 1 or 2 copies of it. This style is more popular for snakes and other animals where most mutations are assumed to be on separate loci.

In the 'Locus' style, you choose 1 or 2 alleles for each locus. This is more realistic.-->

<div id='container'>

<div id='trait-table'></div>

<button id='generate-btn'>Generate</button> - Offspring style: <select id='select-style'>
    <option value='desc'>Description</option>
    <option value='allele'>Alleles</option>
</select>

</div>

CSS

div, img, canvas, p, button, select, input, table, tr, td, th {
    box-sizing: border-box;
}
#container {
    width: 960px;
    margin: 20px auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}
table th {
    background-color: #eee;
    border: 1px solid silver;
    padding: 2px 5px;
}
table td {
    border: 1px solid silver;
    text-align: center;
    padding: 2px 5px;
}
table select {
    width: 80px;
}
/* For absent chromosomes */
table .empty-select {
    width: 80px;
    display: inline-block;
    text-align: center;
}
/* Descriptions under dropdowns/offspring combos */
table .comment {
    font-size: 12px;
}
/* Column widths */
table .col-trait {
    width: 120px;
}
table .col-parent {
    width: 190px;
}
/* Column backgrounds */
table .offspring-m {
    background-color: lightblue;
}
table .offspring-f {
    background-color: lightpink;
}
/* Offspring calculated lists */
table .offspring-combo {
    display: flex;
    justify-content: space-between;
}
table .offspring-percent {
    font-weight: bold;
}

JavaScript

const loci = [ // use existing genos, add combos array
    {
        name: "Extension", symbol: "e",
        wt: "e+",
        alleles: ["E^d", "e+", "e^r", "e^b", "e^wh"],
        descs: [
            ["E^d", "E^d", "Extended black (Homo)"],
            ["E^d", "e+", "Extended black (Het)"],
            ["E^d", "e^wh", "Extended black, Wheaten carrier"],
            ["e^wh", "e^wh", "Wheaten"],
            ["e^wh", "e+", "Wheaten carrier"]
        ]
    },
    {
        name: "Chocolate", symbol: "choc", 
        wt: "Choc+", sl: "z",
        alleles: ["Choc+", "choc"],
        descs: [
            ["Choc+", "choc", "Chocolate carrier"],
            ["choc", "choc", "Chocolate"],
            ["choc", "-", "Chocolate"]
        ]
    },
    {
        name: "Barring", symbol: "b",
        wt: "b+", sl: "z",
        alleles: ["B0", "B1", "B2", "b+"],
        descs: [
            ["B0", "x", "Barred"],
            ["B1", "x", "Barred"],
            ["B2", "x", "Barred"]
        ]
    },
    {
        name: "Silver", symbol: "s",
        wt: "s+", sl: "z",
        alleles: ["S", "S^a", "s+"],
        descs: [
            ["S", "S", "Silver"],
            ["S", "-", "Silver"],
            ["S", "s+", "Semi-silver"]
        ]
    },
    {
        name: "Lavender", symbol: "lav",
        wt: "Lav+",
        alleles: ["Lav+", "lav"],
        descs: [
            ["Lav+", "lav", "Lavender carrier"],
            ["lav", "lav", "Lavender"]
        ]
    },
    {
        name: "Mahogany", symbol: "mh",
        wt: "mh+",
        alleles: ["Mh", "mh+"],
        descs: [
            ["Mh", "mh+", "Mahogany (Het)"],
            ["Mh", "Mh", "Mahogany (Homo)"]
        ]
    },
    {
        name: "Charcoal", symbol: "ch",
        wt: "cha+",
        alleles: ["Cha", "cha+"],
        descs: [
            ["Cha", "cha+", "Charcoal (Het)"],
            ["Cha", "Cha", "Charcoal (Homo)"]
        ]
    },
    {
        name: "Blue", symbol: "bl",
        wt: "bl+",
        alleles:...