JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Chicken gene sim.

<br>M Blue: <select class='m_blue_1'>
  <option value='1'>bl+</option>
  <option value='2'>Bl</option>
</select> <select class='m_blue_2'>
  <option value='1'>bl+</option>
  <option value='2'>Bl</option>
</select>
<br>F Blue: <select class='f_blue_1'>
  <option value='1'>bl+</option>
  <option value='2'>Bl</option>
</select> <select class='f_blue_2'>
  <option value='1'>bl+</option>
  <option value='2'>Bl</option>
</select>

<p><div class='coat_holder'>
  <div class='m_layer_base'></div>
  <div class='m_layer_pattern'></div>
  <div class='m_layer_line'></div>
</div></p>

Male info: <span class='m_info'></span>
<br>Female info: <span class='f_info'></span>

CSS

.black {}
.blue {}
.white {}
.choc {}
.khaki {}
.smoky {}

JavaScript

a$(function(){

// storing alleles.

// blue
var m_bl1 = 1; var f_bl1 = 1; var b_bl1 = 1;
var m_bl2 = 1; var f_bl2 = 1; var b_bl2 = 1;



// lists of each locus' alleles, in order of dominance.
var blueArray = ['bl+','Bl'];

$('select').change(function(){

m_bl1 = $('.m_blue_1').val();
m_bl2 = $('.m_blue_2').val();
f_bl1 = $('.f_blue_1').val();
f_bl2 = $('.f_blue_2').val();

var m_blue = getBlueAlleles(m_bl1,m_bl2);
var f_blue = getBlueAlleles(f_bl1,f_bl2);

$('.m_info').html(m_blue[0]+', '+m_blue[1]);
$('.f_info').html(f_blue[0]+', '+f_blue[1]);

});


function getBlueAlleles(a,b){
var a1 = blueArray[a - 1];
var a2 = blueArray[b - 1];
if(b > a){ return [a2,a1]; }
return [a1,a2];
}

});