JSFiddle - React, Tailwind, and code Playground
by Gwyn Milcote
HTML
<div class='container'>
<div id='mum'>Mother: <div id='femalecol'>Midnight</div><br>
<div id='mumimg'>
<img src='http://griffusion.elementfx.com/pics/critters/Midnight.png' style='width:294px;height:212px;padding:5px;'>
</div>
<select class='pickallele' id='fg1'>
<option value='G' selected>G</option>
<option value='g'>g</option>
</select>
<select class='pickallele' id='fg2'>
<option value='G' selected>G</option>
<option value='g'>g</option>
</select>
<select class='pickallele' id='fr1'>
<option value='R' selected>R</option>
<option value='r'>r</option>
</select>
<select class='pickallele' id='fr2'>
<option value='R' selected>R</option>
<option value='r'>r</option>
</select>
<select class='pickallele' id='fb1'>
<option value='B' selected>B</option>
<option value='b'>b</option>
</select>
<select class='pickallele' id='fb2'>
<option value='B' selected>B</option>
<option value='b'>b</option>
</select>
</div>
<div id='dad'>Father: <div id='malecol'>Midnight</div><br>
<div id='dadimg'>
<img src='http://griffusion.elementfx.com/pics/critters/Midnight.png' style='width:294px;height:212px;padding:5px;'>
</div>
<select class='pickallele' id='mg1'>
<option value='G' selected>G</option>
<option value='g'>g</option>
</select>
<select class='pickallele' id='mg2'>
<option value='G' selected>G</option>
<option value='g'>g</option>
</select>
<select class='pickallele' id='mr1'>
<option value='R' selected>R</option>
<option value='r'>r</option>
</select>
<select class='pickallele' id='mr2'>
<option value='R' selected>R</option>
<option value='r'>r</option>
</select>
<select class='pickallele' id='mb1'>
<option value='B' selected>B</option>
<option value='b'>b</option>
</select>
<select class='pickallele' id='mb2'>
<option value='B' selected>B</option>
<option value='b'>b</option>
</select>
</div>
<br><button id='cross'>Cross</button><br>Here are the coat colours of potential offspring.<br>
<table id='restable'>
<tr><td id='s1'></td><td id='s2'></td><td id='s3'></td><td...CSS
.container {text-align:center;}
#malecol,#femalecol {display:inline-block}
#mum, #dad {border:1px solid black;padding:10px;margin:5px;border-radius:5px;display:inline-block;vertical-align:top;}
#muming, #dadimg {padding:5px;}
#restable {width:700px;margin-top:10px;border-spacing:5px;}
#restable td {border:1px solid black;border-radius:5px;padding:5px;text-align:center;}
/* classes for each coat colour */
.Gold {background: linear-gradient(#fff4bf, #fcc000, #b57100);}
.Magenta {background: linear-gradient(#f478bd, #bd2f7d, #710441);}
.Scarlet {background: linear-gradient(#e45037, #9b2b02, #601b00);}
.Copper {background: linear-gradient(#fdb972, #dd6400, #7e3a06);}
.Mauve {background: linear-gradient(#edcdde, #c886aa, #7c395e);}
.Chocolate {background: linear-gradient(#c09188, #955d56, #552b22);}
.Tan {background: linear-gradient(#edcaa9, #c98557, #8f401e);}
.Sand {background: linear-gradient(#fff8ef, #ffe1b7, #f2be70);}
.Rose {background: linear-gradient(#fee5f7, #fcbfeb, #f292d2);}
.Mocha {background: linear-gradient(#f5e6d2, #c79d78, #8d593e);}
.Coral {background: linear-gradient(#fff4f1, #ffccb5, #e9845d);}
.Champagne {background: linear-gradient(#fcf8ed, #ede1bb, #c6bb9b);}
.Emerald {background: linear-gradient(#abf3b1, #03c614, #006008);}
.Azure {background: linear-gradient(#b0e8fe, #3ca7f6, #005390);}
.Indigo {background: linear-gradient(#97a0ff, #3f4eee, #050e69);}
.Obsidian {background: linear-gradient(#7ea59c, #3a6669, #152039);}
.Lime {background: linear-gradient(#e4fcb6, #9cd231, #4c7202);}
.Turquoise {background: linear-gradient(#93ffe8, #42ceb0, #006952);}
.Slate {background: linear-gradient(#d5e4f0, #93a9ba, #4b5a66);}
.Iron {background: linear-gradient(#939393, #575757, #202020);}
.Olive {background: linear-gradient(#f5f7cc, #ced28c, #8f9253);}
.DuckEgg {background: linear-gradient(#ebf9f5, #a9d8ca, #6c9589);}
.Cloud {background: linear-gradient(#f4f4ff, #d3d4f3, #9a9bc9);}
.Silver {background: linear-gradient(#f6f6f6, #cfcfcf, #939393);}
.Midnight...JavaScript
// when any of the 8 dropdowns are changed, get the values...
// and update parents' eye colour names
$('.pickallele').change(function(){
var mg1 = $('#mg1').val(); var mg2 = $('#mg2').val();
var mr1 = $('#mr1').val(); var mr2 = $('#mr2').val();
var mb1 = $('#mb1').val(); var mb2 = $('#mb2').val();
var fg1 = $('#fg1').val(); var fg2 = $('#fg2').val();
var fr1 = $('#fr1').val(); var fr2 = $('#fr2').val();
var fb1 = $('#fb1').val(); var fb2 = $('#fb2').val();
updateParent(mg1,mg2,mr1,mr2,mb1,mb2,'malecol','dadimg','dad');
updateParent(fg1,fg2,fr1,fr2,fb1,fb2,'femalecol','mumimg','mum');
});
// reusable function, give it the parent's 4 alleles...
// and the ids of the divs to update with results
function updateParent(g1,g2,r1,r2,b1,b2,namediv,img,who){
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(g1 == 'g' && g2 == 'G'){g1 = 'G'; g2 = 'g';}
if(r1 == 'r' && r2 == 'R'){r1 = 'R'; r2 = 'r';}
if(b1 == 'b' && b2 == 'B'){b1 = 'B'; b2 = 'b';}
var genotype = g1+g2+r1+r2+b1+b2;
if(genotype == 'GGrrbb'){colour = 'Gold';}
if(genotype == 'GGRrbb'){colour = 'Copper';}
if(genotype == 'GGRRbb'){colour = 'Scarlet';}
if(genotype == 'GGrrBb'){colour = 'Emerald';}
if(genotype == 'GGrrBB'){colour = 'Azure';}
if(genotype == 'GGRrBB'){colour = 'Indigo';}
if(genotype == 'GGRRBB'){colour = 'Midnight';}
if(genotype == 'GGRRBb'){colour = 'Magenta';}
if(genotype == 'GGRrBb'){colour = 'Obsidian';}
if(genotype == 'Ggrrbb'){colour = 'Sand';}
if(genotype == 'GgRrbb'){colour = 'Tan';}
if(genotype == 'GgRRbb'){colour = 'Chocolate';}
if(genotype == 'GgrrBb'){colour = 'Lime';}
if(genotype == 'GgrrBB'){colour = 'Turquoise';}
if(genotype == 'GgRrBB'){colour = 'Slate';}
if(genotype == 'GgRRBB'){colour = 'Purple';}
if(genotype == 'GgRRBb'){colour = 'Mauve';}
if(genotype == 'GgRrBb'){colour = 'Iron';}
if(genotype == 'ggrrbb'){colour = 'Champagne';}
if(genotype == 'ggRrbb'){colour =...