JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<h2>Quick Overviews</h2>
<select id='select_species'></select>
<button id='select_button'>Go</button>

<p>This table shows a brief summary of each animal's loci, the alleles in them, and (if confirmed) the name of the genes behind them. For more details and sources, visit the animal's section on this website.</p>

<div id='overview_table'></div>

CSS

table {
    border-collapse: collapse;
    width: 100%;
}

table td {
    border: 1px solid silver;
    padding: 5px;
}

table .overview_locus {
    background-color: #eee;
}

JavaScript

/* Used on index, punnett, overview pages. */

const speciesDropdowns = [
    ["disabled","--- Mammals"],
    ["cat","Cat"],
    ["dog","Dog"],
    ["fox","Fox"],
    ["horse","Horse"],
    ["donkey","Donkey"],
    ["cow","Cow"],
    ["pig","Pig"],
    ["sheep","Sheep"],
    ["goat","Goat"],
    ["mouse","Mouse"],
    ["rat","Rat"],
    ["gerbil","Gerbil"],
    ["hamster1","Hamster (Syrian)"],
    ["hamster2","Hamster (Roborovski)"],
    ["hamster3","Hamster (Winter white)"],
    ["hamster4","Hamster (Campbell's)"],
    ["cavy","Guinea pig"],
    ["rabbit","Rabbit"],
    ["chinchilla","Chinchilla"],
    ["ferret","Ferret"],
    ["mink","Mink"],
    ["disabled","--- Birds"],
    ["chicken","Chicken (colour)"],
    ["chicken2","Chicken (shape)"],
    ["pigeon","Pigeon"],
    ["barbary","Barbary dove"],
    ["duck","Duck"],
    ["budgie","Budgie"],
    ["cockatiel","Cockatiel"],
    ["zebrafinch","Zebra finch"],
    ["bengalese","Bengalese finch"],
    ["quail1","Quail (Japanese)"],
    ["quail2","Quail (Chinese/King)"],
    ["quail3","Quail (Bobwhite)"],
    ["disabled","--- Reptiles"],
    ["cornsnake","Corn snake"],
    ["ball","Ball python"],
    ["retic","Reticulated python"],
    ["disabled","--- Fish"],
    ["goldfish","Goldfish"],
    ["koi","Koi"],
    ["medaka","Medaka"],
    ["zebrafish","Zebrafish"]
];

function createSpeciesDropdown(){
    let html = "";
    for(let d of speciesDropdowns){
        if(d[0] == "disabled"){
            html += "<option disabled>" + d[1] + "</option>";
        }else{
            html += "<option value='" + d[0] + "'>" + d[1] + "</option>";
        }
    }
    document.getElementById("select_species").innerHTML += html;
}

createSpeciesDropdown();




const overviews = {
    cat: [
        {
            name: "Agouti", code: "A", gene: "ASIP",
            alleles: [
                {code: "A^pb", info: "Found in Bengal breed. When combined with <b>a</b>, causes dark 'charcoal' appearance."},
                {code: "A+",...