JSFiddle - React, Tailwind, and code Playground

by SaiyanToaster

HTML

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<table class="runes left">
</table>
<div class="rune-calc right">
	<div class="quint-container"></div>
	<div class="mark-container"></div>
	<div class="seal-container"></div>
	<div class="glyph-container"></div>
</div>

CSS

html, body {
	height:100%;
	background-color:#F7F7F7;
	background-size:cover;
	background-repeat:none;
	background-position:center;
}
* {
	margin:0;
	padding:0;
	font-size:12px;
	font-weight:400;
}
* .left {float:left;}
* .right {float:right;}
* .center {margin:auto auto;}
* a {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
	text-decoration:none;
	color:inherit;
}
img, p {cursor:default;}

table.runes {
	width:300px;
	border-collapse: collapse;
}
	table.runes tr:nth-child(odd) {
		background: -webkit-linear-gradient(#F7F7F7, #FFF); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(#F7F7F7, #FFF); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(#F7F7F7, #FFF); /* For Firefox 3.6 to 15 */
		background: linear-gradient(#F7F7F7, #FFF); /* Standard syntax */
		border:1px solid rgba(204,204,204,0.5);
		border-bottom:none;
	}
	table.runes tr:nth-child(even) {
		background:#FFF;
		border:1px solid rgba(204,204,204,0.5);
		border-top:none;
	}
	table.runes tr td:nth-child(2) {padding-left:5px;}
	table.runes tr td.index ,
	table.runes tr td.type {display:none;}
	table.runes tr td.icon {cursor:pointer;}
	table.runes tr td.entry-name {
		font-weight:bold;
		cursor:pointer;
	}
	table.runes tr td.entry-desc {
		padding-bottom:5px;
		font-style:italic;
		cursor:default;
	}
	table.runes tr td.entry-name,
	table.runes tr td.entry-desc {
		padding-left:5px;
		padding-right:5px;
	}
div.rune-calc {
	width:calc(100% - 362px);
	min-height:10px;
	margin:25px 25px 0;
	padding:5px;
	background:#FFF;
	border:1px solid rgba(204,204,204,0.5);
}
	div.rune-calc div.quint-container,
	div.rune-calc div.mark-container,
	div.rune-calc div.seal-container,
	div.rune-calc div.glyph-container {
		display:inline-block;
		padding:5px;
	}
	div.rune-calc div.rune {
		width:48px;
		height:48px;
        background:red !important;
	}

JavaScript

$(document).ready(function() {
	//create table
	$.getJSON("http://ddragon.leagueoflegends.com/cdn/4.14.2/data/en_US/rune.json", function(response){
		console.log(response.data);
		$.each(response.data, function (index, entry) {
			var $name = entry.name;
			var type = NaN;
			if($name.indexOf('mark') != -1 || $name.indexOf('Mark') != -1) {
				type = "Mark";
			} else if($name.indexOf('seal') != -1 || $name.indexOf('Seal') != -1) {
				type = "Seal";
			} else if($name.indexOf('glyph') != -1 || $name.indexOf('Glyph') != -1) {
				type = "Glyph";
			} else if($name.indexOf('quint') != -1 || $name.indexOf('Quint') != -1) {
				type = "Quint";
			};
			$('table.runes').append('<tr><td class="index">'
					+index+ '</td><td class="type">'
					+type+ '</td><td class="icon"> \
					<div style="width:48px;height:48px;background:url(./assets/runes/rune0.png) -' +entry.image.x+ 'px -' +entry.image.y+ 'px no-repeat"> \
					</div></td><td class="entry-name">'
					+entry.name+ '</td></tr> \
					<tr><td></td><td class="entry-desc">'
					+entry.description+ '</td></tr>'
				);
		});
	});
	
	//append runes
	jQuery("body").on("click", "td", function() {
		if($(this).is('td.entry-name') || $(this).is('td.icon')) {
			var getText = $(this).siblings('td.index').text();
			var getType = $(this).siblings('td.type').text();
			console.log(getText); //ID Check
			$.getJSON("http://ddragon.leagueoflegends.com/cdn/4.14.2/data/en_US/rune.json", function(response){
				$.each(response.data, function (index, entry) {
					if(index == getText) {
						console.log(entry.name); //Name Check
						if(getType == "Mark") {
							$('div.mark-container').append('\
								<div class="rune" \
								style="background:url(./assets/runes/rune0.png) -' +entry.image.x+ 'px -' +entry.image.y+ 'px no-repeat"></div>');
						} else if(getType == "Seal") {
							$('div.seal-container').append('\
								<div class="rune" \
								style="background:url(./assets/runes/rune0.png) -' +entry.image.x+...