JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div class='container'>

<div class='parent'>Mother: <div id='mumcol'>Violet</div><br>
<select class='pickbreed' id='m1'> 
<option value='B' selected>B</option>
<option value='b'>b</option>
</select>
<select class='pickbreed' id='m2'>
<option value='B' selected>B</option>
<option value='b'>b</option>
</select> 
<select class='pickbreed' id='m3'>
<option value='R' selected>R</option>
<option value='r'>r</option>
</select>
<select class='pickbreed' id='m4'>
<option value='R' selected>R</option>
<option value='r'>r</option>
</select>
</div> 
<div class='parent'>Father: <div id='dadcol'>Violet</div><br>
<select class='pickbreed' id='d1'> 
<option value='B' selected>B</option>
<option value='b'>b</option>
</select>
<select class='pickbreed' id='d2'>
<option value='B' selected>B</option>
<option value='b'>b</option>
</select> 
<select class='pickbreed' id='d3'>
<option value='R' selected>R</option>
<option value='r'>r</option>
</select>
<select class='pickbreed' id='d4'>
<option value='R' selected>R</option>
<option value='r'>r</option>
</select>
</div>
<br><button id='cross'>Cross</button><br>Here are the eye colours of potential offspring, at 6.25% chance each:<br>

<table id='restable'>
<tr><td id='s1'></td><td id='s2'><td id='s3'></td><td id='s4'></td></tr>
<tr><td id='s5'></td><td id='s6'><td id='s7'></td><td id='s8'></td></tr>
<tr><td id='s9'></td><td id='s10'><td id='s11'></td><td id='s12'></td></tr>
<tr><td id='s13'></td><td id='s14'><td id='s15'></td><td id='s16'></td></tr>
</table>

</div>

CSS

.container {text-align:center;}
#mumcol,#dadcol {display:inline-block}
.parent {border:1px solid grey;padding:10px;margin:5px;border-radius:5px;display:inline-block;vertical-align:top;}
.parent img {width:240px;height:163px;}
#restable {width:580px;margin-top:10px;border-spacing:5px;}
#restable td {border:1px solid blue;border-radius:5px;padding:5px;text-align:center;}

JavaScript

// when any of the 8 dropdowns are changed, get the values...
// and update parents' eye colour names
$('.pickbreed').change(function(){
var m1 = $('#m1').val(); var m2 = $('#m2').val();
var m3 = $('#m3').val(); var m4 = $('#m4').val();
var d1 = $('#d1').val(); var d2 = $('#d2').val();
var d3 = $('#d3').val(); var d4 = $('#d4').val();

updateParent(m1,m2,m3,m4,'mumcol');
updateParent(d1,d2,d3,d4,'dadcol');

});

// reusable function, give it the parent's 4 alleles...
// and the ids of the divs to update with results
function updateParent(a1,a2,a3,a4,namediv){
var colour = '?';

// before assembling genotype, make sure alleles are ordered with capitals first. This is not strictly needed here, but it is needed on the game
if(a1 == 'b' && a2 == 'B'){a1 = 'B'; a2 = 'b';}
if(a3 == 'r' && a4 == 'R'){a3 = 'R'; a4 = 'r';}

var genotype = a1+a2+a3+a4;
if(genotype == 'BBRR'){colour = 'Violet';}
if(genotype == 'BBRr'){colour = 'Indigo';}
if(genotype == 'BBrr'){colour = 'Vivid Blue';}
if(genotype == 'BbRR'){colour = 'Deep Green';}
if(genotype == 'BbRr'){colour = 'Vivid Green';}
if(genotype == 'Bbrr'){colour = 'Silver Blue';}
if(genotype == 'bbRR'){colour = 'Deep Red';}
if(genotype == 'bbRr'){colour = 'Amber';}
if(genotype == 'bbrr'){colour = 'Golden Yellow';}

$('#'+namediv).html('<b>'+colour+'</b>');

}

// when button is clicked, cross the bloodlines and update table
$('#cross').click(function(){
var m1 = $('#m1').val(); var m2 = $('#m2').val();
var m3 = $('#m3').val(); var m4 = $('#m4').val();
var d1 = $('#d1').val(); var d2 = $('#d2').val();
var d3 = $('#d3').val(); var d4 = $('#d4').val();

// now send the function all...