JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

animal tool.
<br><button id='randomise'>Randomise!</button> 
Sex: <select id='select_sex'>
    <option value='m'>Male</option>
    <option value='f' selected>Female</option>
</select>
<br>A: <select id='select_a1'>
    <option value='A'>A</option>
    <option value='a' selected>a</option>
</select> <select id='select_a2'>
    <option value='A'>A</option>
    <option value='a' selected>a</option>
</select>
B: <select id='select_b1'>
    <option value='B' selected>B</option>
    <option value='b'>b</option>
</select> <select id='select_b2'>
    <option value='B' selected>B</option>
    <option value='b'>b</option>
</select>
C: <select id='select_c1'>
    <option value='C'>C</option>
    <option value='c' selected>c</option>
</select> <select id='select_c2'>
    <option value='C'>C</option>
    <option value='c' selected>c</option>
</select>
D: <select id='select_d1'>
    <option value='D'>D</option>
    <option value='d' selected>d</option>
</select> <select id='select_d2'>
    <option value='D'>D</option>
    <option value='d' selected>d</option>
</select>

<p>Description: <span id='description'></span></p>
Genotype: <span id='genotype'></span>
<div id='coat_adult'></div>

CSS

#coat_adult {width:400px;height:300px;position:relative;}
#coat_adult img {width:100%;height:100%;position:absolute;top:0px;left:0px;}

.multiply {
  mix-blend-mode: multiply;
}
.overlay {
  mix-blend-mode: soft-light;
}

/* 
    Classes for each coat colour.
    'f' means filters for black PNG images.
    'c' means background colour for divs.
    1-4 are shades: Base, Faded, Bright, Cream.
*/

/* Red, salmon, amaranth, pink */
.f_red_1 {filter: invert(13%) sepia(59%) saturate(5042%) hue-rotate(354deg) brightness(81%) contrast(90%);}
.f_red_2 {filter: invert(41%) sepia(14%) saturate(6118%) hue-rotate(337deg) brightness(92%) contrast(85%);}
.f_red_3 {filter: invert(58%) sepia(73%) saturate(483%) hue-rotate(308deg) brightness(100%) contrast(108%);}
.f_red_4 {filter: invert(86%) sepia(68%) saturate(1606%) hue-rotate(289deg) brightness(121%) contrast(102%);}

/* Orange, tan, gold, cream */
.f_orange_1 {filter: invert(38%) sepia(72%) saturate(1254%) hue-rotate(358deg) brightness(87%) contrast(98%);}
.f_orange_2 {filter: invert(60%) sepia(44%) saturate(658%) hue-rotate(340deg) brightness(90%) contrast(78%);}
.f_orange_3 {filter: invert(77%) sepia(9%) saturate(2816%) hue-rotate(340deg) brightness(97%) contrast(89%);}
.f_orange_4 {filter: invert(89%) sepia(17%) saturate(824%) hue-rotate(330deg) brightness(97%) contrast(104%);}

/* Amber, khaki, chiffon, ivory */
.f_amber_1 {filter: invert(70%) sepia(95%) saturate(586%) hue-rotate(335deg) brightness(100%) contrast(94%);}
.f_amber_2 {filter: invert(85%) sepia(34%) saturate(494%) hue-rotate(323deg) brightness(93%) contrast(88%);}
.f_amber_3 {filter: invert(99%) sepia(97%) saturate(1026%) hue-rotate(314deg) brightness(102%) contrast(98%);}
.f_amber_4 {filter: invert(88%) sepia(90%) saturate(286%) hue-rotate(312deg) brightness(102%) contrast(101%);}

/* Green, olive, lime, celadon */
.f_green_1 {filter: invert(37%) sepia(18%) saturate(3196%) hue-rotate(56deg) brightness(96%) contrast(95%);}
.f_green_2 {filter: invert(73%)...

JavaScript

var path = '';

var animal = {};

/*
* These are ALL POSSIBLE ALLELES the animal can carry.
* Ordered by dominance in each locus.
*/
var genome = {
    // Black
	a: ["A", "a"],
	// White
	b: ["B", "b"],
	// Exotic
	c: ["C", "c"],
	// Red
	d: ["D", "d"]
}

/*
* These are just the names of the loci above.
* Useful for looping through animal and genome objects.
*/
var loci = ["a", "b", "c", "d"];


// Pick a random number between any two.
function randomNumber(n1, n2){
	if(n1 == n2){
        return n1;
    }
    var min = n1;
    var max = n2;
    if(n1 > n2){
        min = n2;
        max = n1;
    }
    return Math.floor(Math.random()*(max-min+1)+min);
}

// Pick a random value from an array.
function randomArray(array){
	return array[Math.floor(Math.random()*array.length)];
}



/*
* Clicked button. Generate a random animal!
*/
$("#randomise").click(function(){
    
    for(var i = 0; i < loci.length; i++){
        var locus_name = loci[i];
        var locus = genome[locus_name];
        
        var a1 = randomArray(locus);
        var a2 = randomArray(locus);
        
        // Re-order by dominance.
        if(locus.indexOf(a1) > locus.indexOf(a2)){
            animal[locus_name + "1"] = a2;
            animal[locus_name + "2"] = a1;
        }else{
            animal[locus_name + "1"] = a2;
            animal[locus_name + "2"] = a1;
        }
    }
    
    // Remove alleles here, if sex-linked.
    animal.sex = "f";
    if(Math.random() > 0.5){
        animal.sex = "m";
       // animal.k2 = "-";
       // animal.e2 = "-";
    }
    
    renderAnimal(animal);
    
});

/*
* Manually design the animal using dropdowns.
*/
$("select").change(function(){

    // Loop and get values of all dropdowns.
    // animal["e2"] = $("#select_e2").val();
    for(var i = 0; i < loci.length; i++){
        var locus = loci[i];
        animal[locus + "1"] = $("#select_" + locus + "1").val();
        animal[locus + "2"] = $("#select_" + locus + "2").val();
    }
    
   ...