JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<ul class="list">
  <li class="radioSettings">
    <ul>
      <li>
        <span>
    			<label>White</label>
					<input name="colorizer" type="radio" value="white" />
    		</span>
      </li>
      <li>
        <span>
    			<label>Dark</label>
					<input name="colorizer" type="radio" value="dark" />
    		</span>
      </li>
    </ul>
  </li>
  <li id="colors_body">
    <input type="text" value="ffffff" class="color">
  </li>
  <li id="colors_wrapper">
    <input type="text" value="000000" class="color">
  </li>
  <li id="colors_footer">
    <input type="text" value="575757" class="color">
  </li>
</ul>

JavaScript

var colorizer = {}

colorizer['white'] = {
  'colors_body': 'FFFFFF',
  'colors_wrapper': 'E6E6E6',
  'colors_footer': 'CCCCCC'
}

colorizer['dark'] = {
  'colors_body': 'EBEEF2',
  'colors_wrapper': 'B2B5B8',
  'colors_footer': '1A2758'
}

$('input[name="colorizer"]').change(function() {

  var color = $(this).val();

  $.each(colorizer[color], function(i,v) {
		$('#'+i+' input').val(v);
  });

});