JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

CSS filter breeding generator.

<p>
<select class='male_colour' style='width:30%;'>
  <option value='11'>Pink</option><option value='12'>Red Purple</option>
  <option value='21'>Red</option><option value='22'>Brown</option>
  <option value='31'>Orange</option><option value='32'>Peach</option>
  <option value='41'>Yellow</option><option value='42'>Champagne</option>
  <option value='51'>Green</option><option value='52'>Olive</option>
  <option value='61'>Blue</option><option value='62'>Turquoise</option>
  <option value='71'>Indigo</option><option value='72'>Slate</option>
  <option value='81'>Blue Purple</option><option value='82'>Faded Purple</option>
  <option value='91'>Rainbow</option><option value='92'>Grey</option>
  </select> 
  <input type="range" min="1" max="13" value="7" style='width:30%;' class="male_shade"> 
  <span id='male_result' style='width:30%;'></span>
<br>
<select class='female_colour' style='width:30%;'>
  <option value='11'>Pink</option><option value='12'>Red Purple</option>
  <option value='21'>Red</option><option value='22'>Brown</option>
  <option value='31'>Orange</option><option value='32'>Peach</option>
  <option value='41'>Yellow</option><option value='42'>Champagne</option>
  <option value='51'>Green</option><option value='52'>Olive</option>
  <option value='61'>Blue</option><option value='62'>Turquoise</option>
  <option value='71'>Indigo</option><option value='72'>Slate</option>
  <option value='81'>Blue Purple</option><option value='82'>Faded Purple</option>
  <option value='91'>Rainbow</option><option value='92'>Grey</option>
  </select> 
  <input type="range" min="1" max="13" value="7" style='width:30%;' class="female_shade"> 
  <span id='female_result' style='width:30%;'></span>
</p>
<button class='combine'>Mix</button>
<p>
  <span class='baby_result'></span>
</p>

JavaScript

var m_colour = 2; var m_shade = 7;
var f_colour = 8; var f_shade = 7;

$('select').change(function(){
  var m_colour = $('.male_colour').val();
  var m_shade = $('.male_shade').val();
  if(shade < 10){shade = '0'+shade;}
  $('#colour').html(colour+shade).attr("class",'colour'+colour+shade);
  
  //var colourclass = 'filter'+colour+shade;
  $('#pic').attr("class",'filter'+colour+shade);
});