JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

dog genes.<br>
A: <select class='a_1'>
    <option value='1'>A+</option>
    <option value='2'>a^t</option>
    <option value='3'>a</option>
</select> <select class='a_2'>
    <option value='1'>A+</option>
    <option value='2'>a^t</option>
    <option value='3'>a</option>
</select> 
B: <select class='b_1'>
    <option value='1'>B+</option>
    <option value='2'>b</option>
</select> <select class='b_2'>
    <option value='1'>B+</option>
    <option value='2'>b</option>
</select> 
C: <select class='c_1'>
    <option value='1'>C+</option>
    <option value='2'>c^chd</option>
    <option value='3'>c^chl</option>
    <option value='4'>c^h</option>
    <option value='5'>c</option>
</select> <select class='c_2'>
    <option value='1'>C+</option>
    <option value='2'>c^chd</option>
    <option value='3'>c^chl</option>
    <option value='4'>c^h</option>
    <option value='5'>c</option>
</select> 
D: <select class='d_1'>
    <option value='1'>D+</option>
    <option value='2'>d</option>
</select> <select class='d_2'>
    <option value='1'>D+</option>
    <option value='2'>d</option>
</select> 
E: <select class='e_1'>
    <option value='1'>E^s</option>
    <option value='2' selected>E+</option>
    <option value='3'>e^j</option>
    <option value='4'>e</option>
</select> <select class='e_2'>
    <option value='1'>E^s</option>
    <option value='2' selected>E+</option>
    <option value='3'>e^j</option>
    <option value='4'>e</option>
</select>
<br>
En: <select class='en_1'>
    <option value='1'>En</option>
    <option value='2' selected>en+</option>
</select> <select class='en_2'>
    <option value='1'>En</option>
    <option value='2' selected>en+</option>
</select> 
Du: <select class='du_1'>
    <option value='1'>Du+</option>
    <option value='2'>du</option>
</select> <select class='du_2'>
    <option value='1'>Du+</option>
    <option value='2'>du</option>
</select> 
V: <select class='v_1'>
    <option value='1'>V+</option>
    <option value='2'>v</option>
</select>...

CSS

/* Black and stuff. */
.black {}
.chocolate {}
.blue {}
.lilac {}

/* Brown etc. */
.cinnamon {}
.tan {}
.fawn {}

/* Other */
.steel {}
.white {}

/* actually need 3-4 shades of every red-based colour, for rufus modifiers... */

JavaScript

// Agouti.  a^h is not understood enough.
// Alleles: A^y > a^w > a^t > a
var a1, a2 = 'A^w';

// Brown.
// Alleles: B+ > b
var b1, b2 = 'B';

// Dilution.
// Alleles: D+ > d
var d1, d2 = 'D';

// Extension.
// Alleles: E^m > E^G > E+ > e
var e1, e2 = 'E';

// K. Uhh.
// Alleles: K^B > K^br > K^y
var k1, k2 = 'K^B';

// Harlequin. No effect unless merle too.
// Alleles: H > h+
var h1, h2 = 'h+';

// Spotting. s^i and s^w are unproven.
// Alleles: S+ > s^p
var s1, s2 = 'S+';

// Merle.
// Alleles: M > m+
var m1, m2 = 'm+';

// Urajiro.
// Alleles: U > u+
var u1, u2 = 'u+';

// Intensity.
// Alleles: I > i+
var i1, i2 = 'i+';

// Plus/minus modifiers for white. Number 1 to 5.
var mod = 3;


$('select, input').change(function(){
    
    a1 = Number( $('.a_1').val() );
    a2 = Number( $('.a_2').val() );
    b1 = Number( $('.b_1').val() );
    b2 = Number( $('.b_2').val() );
    c1 = Number( $('.c_1').val() );
    c2 = Number( $('.c_2').val() );
    d1 = Number( $('.d_1').val() );
    d2 = Number( $('.d_2').val() );
    e1 = Number( $('.e_1').val() );
    e2 = Number( $('.e_2').val() );
    en1 = Number( $('.en_1').val() );
    en2 = Number( $('.en_2').val() );
    du1 = Number( $('.du_1').val() );
    du2 = Number( $('.du_2').val() );
    v1 = Number( $('.v_1').val() );
    v2 = Number( $('.v_2').val() );
    si1 = Number( $('.si_1').val() );
    si2 = Number( $('.si_2').val() );
    w1 = Number( $('.w_1').val() );
    w2 = Number( $('.w_2').val() );
    rufus = Number( $('.rufus').val() );
    mod = Number( $('.mod').val() );
    
    stuff();
});


function stuff(){
    
    // In case genes are stored as numbers in DB.
    // Show what we're choosing, from dropdowns...
    var geno = a1 +""+ a2 +""+ b1 +""+ b2 +""+ c1 +""+ c2 +""+ d1 +""+ d2 +""+ e1 +""+ e2 +""+ en1 +""+ en2 +""+ du1 +""+ du2 +""+ v1 +""+ v2 +""+ si1 +""+ si2 +""+ w1 +""+ w2 +""+ rufus +""+ mod;
    
    // Now convert each digit into letter(s).
    a1 = getAgoutiAllele(a1);
    a2 =...