JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Animal classes.

<p>
<span id='overall_stats'></span>
<br><span id='species_stats'></span>
<br>Refresh the page for a different animal!
</p>

<select id='animal_types'>
      <option disabled>--- Mammals</option>
    <option value='cat' selected>Cat</option>
    <option value='dog'>Dog</option>
    <option value='horse'>Horse</option>
    <option value='donkey'>Donkey</option>
    <option value='cow'>Cow</option>
    <option value='pig'>Pig</option>
    <option value='mouse'>Mouse</option>
    <option value='rat'>Rat</option>
    <option value='cavy'>Guinea pig (Cavy)</option>
    <option value='rabbit'>Rabbit</option>
    <option value='ferret'>Ferret</option>
    <option value='fox'>Fox</option>
      <option disabled>--- Birds</option>
    <option value='chicken'>Chicken (colour)</option>
    <option value='chicken2'>Chicken (shape)</option>
    <option value='budgie'>Budgie</option>
    <option value='cockatiel'>Cockatiel</option>
    <option value='zebrafinch'>Zebrafinch</option>
    <option value='quail1'>Quail (Japanese)</option>
    <option value='quail2'>Quail (Chinese Painted)</option>
    <option value='quail3'>Quail (Bobwhite)</option>
      <option disabled>--- Reptiles</option>
    <option value='cornsnake'>Corn snake</option>
    <option value='ballpython'>Ball python</option>
    <option value='reticpython'>Reticulated python</option>
      <option disabled>--- Fish</option>
    <option value='goldfish'>Goldfish</option>
    <option value='medaka'>Medaka</option>
    <option value='zebrafish'>Zebrafish</option>
</select> 
<button id='random_animal'>Randomise!</button> 
<button id='cross_animal'>Cross 2 random parents</button>

<p>JSON: <span id='json_geno'>...</span></p>
Geno: <span id='output_geno'>...</span>
<p>Image: <div id='animal_image'>...</div></p>


<div id='select_container'></div>

JavaScript

const path = "http://mythstable.epizy.com/genetics/images/";

// GENOMES
// Known alleles at each locus, ordered by dominance.
const animalData = {
    horse: {
        name: "Horse", specific: "Equus ferus caballus",
        genome: {
            e: {
                name: "Extension", wt: "E+",
                alleles: ["E+", "e"]
            },
            a: {
                name: "Agouti", wt: "A+",
                alleles: ["A+", "a^t", "a"]
            },
            cr: {
                name: "Cream", wt: "cr+",
                alleles: ["Cr", "cr+", "prl"]
            },
            ch: {
                name: "Champagne", wt: "ch+",
                alleles: ["Ch", "ch+"]
            },
            g: {
                name: "Grey", wt: "g+",
                alleles: ["G", "g+"]
            },
            d: {
                name: "Dun", wt: "nd1",
                alleles: ["D", "nd1", "nd2"]
            },
            // Only including W20 for simplicity.
            kit: {
                name: "KIT", wt: "kit+",
                alleles: ["W20", "Rn", "Tb", "Sab1", "kit+"]
            },
            // Simplified. 6 muts on 2 genes: MITF, PAX3
            spl: {
                name: "Splash", wt: "spl+",
                alleles: ["Spl", "spl+"]
            },
            o: {
                name: "Frame", wt: "o+",
                alleles: ["O", "o+"]
            },
            lp: {
                name: "Leopard", wt: "lp+",
                alleles: ["Lp", "lp+"]
            },
            patn1: {
                name: "Pattern1", wt: "patn1+",
                alleles: ["Patn1", "patn1+"]
            },
            // ? Pattern 2
            //patn2: ["Patn2", "patn2+"],
            // Silver
            z: {
                name: "Silver", wt: "z+",
                alleles: ["Z", "z+"]
            },
            br1: {
                name: "Brindle1", wt: "br1+",
                alleles: ["Br1", "br1+"]
            },
        },
        mods:...