Theme Color Preview

by rdenver6

HTML

<textarea id="themeInput" rows="28" cols="50"></textarea>
<button id="Go">Go</button>
<button id="Reset">Reset</button>
<div id="results"></div>

CSS

#results {padding-top:20px;}
.wrapper {height:30px;}
.wrapper > div {float:left;}
.text {width:225px;}
.colors {width:50px;height:20px;}

JavaScript

var button = $("#Go");
var resetbutton = $("#Reset")

// handle click and add class
button.on("click", function(){
  var themeColors = $('#themeInput').val();
	var data = JSON.parse(themeColors);
  console.log(data);
	var resultHtml = '';
  $.each(data, function(idx,obj){        		
      resultHtml+='<div class="wrapper">';     
			resultHtml+='<div class="text">';           
      resultHtml+= idx + " " + obj;
      resultHtml+= '</div>';
			resultHtml+= '<div class="colors" ';      
			resultHtml+= 'style="background-color:' + obj + '">';
			resultHtml+='</div>';      
      resultHtml+='</div>';      
  });
	$('div#results').html(resultHtml);
	$('#themeInput').hide();
})

// handle click and add class
resetbutton.on("click", function(){
	$('#themeInput').val('');
  $('#themeInput').show();
  $('div#results').empty();
})
/*
{
  "themePrimary": "#00587c",
  "themeLighterAlt": "#f0f7fa",
  "themeLighter": "#c5e0ea",
  "themeLight": "#97c6d8",
  "themeTertiary": "#4793b1",
  "themeSecondary": "#116a8d",
  "themeDarkAlt": "#005170",
  "themeDark": "#00445f",
  "themeDarker": "#003246",
  "neutralLighterAlt": "#f8f8f8",
  "neutralLighter": "#f4f4f4",
  "neutralLight": "#eaeaea",
  "neutralQuaternaryAlt": "#dadada",
  "neutralQuaternary": "#d0d0d0",
  "neutralTertiaryAlt": "#c8c8c8",
  "neutralTertiary": "#e6bcad",
  "neutralSecondary": "#cd8267",
  "neutralPrimaryAlt": "#b55431",
  "neutralPrimary": "#ac451e",
  "neutralDark": "#823316",
  "black": "#602510",
  "white": "#ffffff",
  "primaryBackground": "#ffffff",
  "primaryText": "#ac451e",
  "disabledBackground": "#f4f4f4",
  "disabledText": "#c8c8c8"
}
*/