JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id="content"><br>
<script type="text/javascript">


	function getAlleles(genetag) {
		var radios = document.getElementsByName(genetag);
		for (var i=0; i<radios.length; i++) {
			if (radios[i].checked)
				return radios[i].value;
		}
		return false;
	}
  
  
  
	function getImgCode(gender, black, white, rainbow){
		var imgcode=gender+'a';
		if (black==2) imgcode+='bk';
		else if (black==1 && gender=='m') imgcode+='bk';
		else if (white==2) {
			if (rainbow==2) imgcode+='rb';
			else if (rainbow==1&&gender=='m') imgcode+='rb';
			else imgcode+='wh';
		} else imgcode+='or';
		if (black==1 && gender=='f') imgcode+='c';
		else imgcode+='s';
		imgcode+='knnb.png';
		return imgcode;
	}
  
  
  
	function getStyle(gender,black,white,rainbow){
		var stylecode='background:';
		if (black==1 && gender=='f') stylecode+="url('https://a.deviantart.net/avatars-big/i/c/icestar142.png') ";
		if (black==2) stylecode+='#000000; color:#777777;';
		else if (black==1 && gender=='m') stylecode+='#000000; color:#777777;';
		else if (white==2) {
			if (rainbow==2) stylecode+='#2c5f98; color:#6aa5b3';
			else if (rainbow==1&&gender=='m') stylecode+='#2c5f98; color:#6aa5b3';
			else stylecode+='#ffffff; color:#aaaaaa';
		} else stylecode+='#b45313; color:#b59a78';
		return stylecode;
	}
  
  
  
	function getTxtCode(gender,black,white,rainbow){
		var txtcode='';
		if (gender=='m'){
			if(black>0) txtcode+='K';
			else txtcode+='k';
		} else {
			for (var i=0; i<black; i++)
				txtcode+='K';
			for (var i=2; i>black; i--)
				txtcode+='k';
		}
		for (var i=2; i>white; i--)
			txtcode+='W';
		for (var i=0; i<white; i++)
			txtcode+='w';
		if (gender=='m'){
			if(rainbow==0) txtcode+='E';
			else txtcode+='e';
		}else{
			for (var i=2; i>rainbow; i--)
				txtcode+='E';
			for (var i=0; i<rainbow; i++)
				txtcode+='e';
		}
		return txtcode;
	}
  
  
  
	function update(gender){
		var black=getAlleles(gender+'bk');
		var white=getAlleles(gender+'wh');
		var...

CSS

#content { padding-top:0 }
	.pagetitle {
		border-bottom:1px solid;
		border-top:1px solid;
		font-family:serif;
		font-size:1.7em;
		padding:5px;
		margin-bottom:20px;
	}
	.pagetitle img { vertical-align:middle }
	table.pages a { display:block }
	#punnett td {
		text-align:center;
		border:double #ACA89B;
		width:50px;
		height:50px;
		font-family:courier, monospace;
	}
#mallele1, #mallele2, #mallele3, #mallele4, 
	#mallele5, #mallele6, #mallele7, #mallele8 { height:20px !important; padding:0px }
	#fallele1, #fallele2, #fallele3, #fallele4, 
	#fallele5, #fallele6, #fallele7, #fallele8 { width:20px !important; }
	#fbox { width:20px }
	#mbox { height:20px }
	fieldset {
		border:1px solid #3e3c38;
		padding:0 7px 10px;
		margin: 0px 2px;
		text-align:left;
	}
	table.colorchart {
		width:auto !important;
		margin:0 !important;
	}
	.colorchart td {
		width:50px;
		text-align:left;
		vertical-align:bottom;
	}
	.colorchart th {
		width:40px;
		text-align:right;
	}
	.pigdesc {
		font-style:courier;
		font-size:.9em;
	}
	#fcode, #mcode { font-family:courier,monospace }