JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Extension: <select class='select_e1'>
  <option value='e+'>e+ (duckwing)</option>
  <option value='E'>E (extended black)</option>
  <option value='ER'>ER (birchen)</option>
  <option value='EWh'>EWh (wheaten)</option>
  <option value='eb'>eb (partridge)</option>
</select> <select class='select_e2'>
  <option value='e+'>e+ (duckwing)</option>
  <option value='E'>E (extended black)</option>
  <option value='ER'>ER (birchen)</option>
  <option value='EWh'>EWh (wheaten)</option>
  <option value='eb'>eb (partridge)</option>
</select>

Columbian: <select class='select_co1'>
  <option value='co+'>co+</option>
  <option value='Co'>Co (columbian)</option>
</select> <select class='select_co2'>
  <option value='co+'>co+</option>
  <option value='Co'>Co (columbian)</option>
</select> 
<br>
Darkbrown: <select class='select_db1'>
  <option value='db+'>db+</option>
  <option value='Db'>Db (ginger)</option>
</select> <select class='select_db2'>
  <option value='db+'>db+</option>
  <option value='Db'>Db (ginger)</option>
</select>

Melanotic: <select class='select_ml1'>
  <option value='ml+'>ml+</option>
  <option value='Ml'>Ml (melanised)</option>
</select> <select class='select_ml2'>
  <option value='ml+'>ml+</option>
  <option value='Ml'>Ml (melanised)</option>
</select>
<br>
Pattern: <select class='select_pg1'>
  <option value='pg+'>pg+</option>
  <option value='Pg'>Pg (laced)</option>
</select> <select class='select_pg2'>
  <option value='pg+'>pg+</option>
  <option value='Pg'>Pg (laced)</option>
</select>

Charcoal: <select class='select_cha1'>
  <option value='cha+'>cha+</option>
  <option value='Cha'>Cha (charcoal)</option>
</select> <select class='select_cha2'>
  <option value='cha+'>cha+</option>
  <option value='Cha'>Cha (charcoal)</option>
</select>
<br>
Mahogany: <select class='select_mh1'>
  <option value='mh+'>mh+</option>
  <option value='Mh'>Mh (red)</option>
</select> <select class='select_mh2'>
  <option value='mh+'>mh+</option>
  <option value='Mh'>Mh...

CSS

/* position layers */

.coat_holder {
  position: relative;
}
.coat_holder div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.coat_cock {}
.coat_hen {}


/* feather colours */

.hex_red {
  background-color: #723221;
}
.red {
  filter: invert(15%) sepia(73%) saturate(1663%) hue-rotate(348deg) brightness(98%) contrast(82%);
}

.hex_gold {
  background-color: #d06829;
}
.gold {
  filter: invert(40%) sepia(99%) saturate(367%) hue-rotate(340deg) brightness(100%) contrast(101%);
}

.hex_buff {
  background-color: #eaac47;
}
.buff {
  filter: invert(76%) sepia(44%) saturate(749%) hue-rotate(338deg) brightness(96%) contrast(90%);
}

.hex_lemon {
  background-color: #fbe5a2;
}
.lemon {
  filter: invert(100%) sepia(23%) saturate(6274%) hue-rotate(303deg) brightness(120%) contrast(97%);
}

/* chocolate and dun look same? */
.hex_chocolate {
  background-color: #624a43;
}
.chocolate {
  filter: invert(29%) sepia(10%) saturate(1117%) hue-rotate(327deg) brightness(97%) contrast(90%);
}

.hex_khaki {
  background-color: #b5a593;
}
.khaki {
  filter: invert(70%) sepia(15%) saturate(344%) hue-rotate(351deg) brightness(92%) contrast(92%);
}

/* unsure how lav dilutes diff colours */
.hex_isabel_red {
  background-color: #f6d697;
}
.isabel_red {
  filter: invert(97%) sepia(100%) saturate(699%) hue-rotate(313deg) brightness(101%) contrast(93%);
}

.hex_isabel_gold {
  background-color: #feecd0;
}
.isabel_gold {
  filter: invert(95%) sepia(24%) saturate(4353%) hue-rotate(294deg) brightness(128%) contrast(106%);
}

.hex_black {
  background-color: #242424;
}
.black {
  filter: invert(9%);
}

/* blue and smoky look same? */
.hex_blue {
  background-color: #868a9c;
}
.blue {
  filter: invert(55%) sepia(14%) saturate(350%) hue-rotate(192deg) brightness(96%) contrast(89%);
}

.hex_lavender {
  background-color: #d4d5db;
}
.lavender {
  filter: invert(98%) sepia(1%) saturate(2902%) hue-rotate(186deg) brightness(90%) contrast(91%);
}

.hex_white {
 ...

JavaScript

var url = "http://mythstable.epizy.com/chicken/";

// extension.
var e1 = 'e+'; var e2 = 'e+';

// columbian.
var co1 = 'co+'; var co2 = 'co+';

// darkbrown.
var db1 = 'db+'; var db2 = 'db+';

// melanotic.
var ml1 = 'ml+'; var ml2 = 'ml+';

// pattern.
var pg1 = 'pg+'; var pg2 = 'pg+';

// charcoal.
var cha1 = 'cha+'; var cha2 = 'cha+';

// mahogany.
var mh1 = 'mh+'; var mh2 = 'mh+';

// dilute.
var di1 = 'di+'; var di2 = 'di+';

// inhibitor of gold.
var ig1 = 'ig+'; var ig2 = 'ig+';

// champagne blonde.
var cb1 = 'cb+'; var cb2 = 'cb';

// silver.
var s1 = 's+'; var s2 = 's+';

// barred.
var b1 = 'b+'; var b2 = 'b+';

// blue.
var bl1 = 'bl+'; var bl2 = 'bl+';

// chocolate.
var choc1 = 'choc+'; var choc2 = 'choc+';

// dom white.
var i1 = 'i+'; var i2 = 'i+';

// rec white.
var c1 = 'C+'; var c2 = 'C+';


$('select').change(function(){
    
    e1 = $('.select_e1').val();
    e2 = $('.select_e2').val();
    co1 = $('.select_co1').val();
    co2 = $('.select_c2').val();
    db1 = $('.select_db1').val();
    db2 = $('.select_db2').val();
    ml1 = $('.select_ml1').val();
    ml2 = $('.select_ml2').val();
    pg1 = $('.select_pg1').val();
    pg2 = $('.select_pg2').val();
    cha1 = $('.select_cha1').val();
    cha2 = $('.select_cha2').val();
    mh1 = $('.select_mh1').val();
    mh2 = $('.select_mh2').val();
    di1 = $('.select_di1').val();
    di2 = $('.select_edi2').val();
    ig1 = $('.select_ig1').val();
    ig2 = $('.select_ig2').val();
    cb1 = $('.select_cb1').val();
    cb2 = $('.select_cb2').val();
    s1 = $('.select_s1').val();
    s2 = $('.select_s2').val();
    b1 = $('.select_b1').val();
    b2 = $('.select_b2').val();
    bl1 = $('.select_bl1').val();
    bl2 = $('.select_bl2').val();
    choc1 = $('.select_choc1').val();
    choc2 = $('.select_choc2').val();
    i1 = $('.select_i1').val();
    i2 = $('.select_i2').val();
    c1 = $('.select_c1').val();
    c2 = $('.select_c2').val();
    
    updateHen();
    updateCock();
});

function...