JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

rabbit 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...

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

var rabbit = {
    rufus: 3, mod: 3,
    a1: "A+", a2: "A+",
    b1: "B+", b2: "B+",
    c1: "C+", c2: "C+",
    d1: "D+", d2: "D+",
    e1: "E+", e2: "E+",
    en1: "en+", en2: "en+",
    du1: "Du+", du2: "Du+",
    v1: "V+", v2: "V+",
    si1: "Si+", si2: "Si+",
    w1: "W+", w2: "W+"
};

// Alleles in order of dominance.
// Used when making random griffins, and when showing genotype.
var agouti = ["A+", "a^t", "a"];
var black = ["B+", "b"];
var colour = ["C+", "c^chd", "c^chl", "c^h", "c"];
var dense = ["D+", "d"];
var extension = ["E^s", "E+", "e^j", "e"];
var broken = ["En", "en+"];
var dutch = ["Du+", "du"];
var vienna = ["V+", "v"];
var silver = ["Si+", "si"];
var width = ["W+", "w"];



$('select, input').change(function(){
    /*  if using digits, values.
    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() );
    */
    // if using letters.
    rabbit.a1 = $('.a_1').find('option:selected').text();
    rabbit.a2 = $('.a_2').find('option:selected').text();
    rabbit.b1 = $('.b_1').find('option:selected').text();
    rabbit.b2 = $('.b_2').find('option:selected').text();
    rabbit.c1 = $('.c_1').find('option:selected').text();
    rabbit.c2 = $('.c_2').find('option:selected').text();
    rabbit.d1 = $('.d_1').find('option:selected').text();
    rabbit.d2 =...