JSFiddle - React, Tailwind, and code Playground

by keif

HTML

<div id="outer-wrapper">
	<div id="wrapper">
		<section id="content" itemprop="mainContentOfPage">
			<section class="special-feature">
            	<div id="desktopSizeFit"> <!-- DESKTOP -->
            		<div class="tabs grp tab-wrapper tab-group">
						<div id="tab1" class="tab_content show">
							<div class="howToMeasure">
								<div class="col-b">
									<h2 class="subtitle medium">Fit Calculator</h2>
									<div class="angelfit-calc">
										<div class="ui-alert tooltip-error tooltip-error-left"></div>
										<div class="angelfit-inputarea">
											<div class="angelfit-input">
												<label for="bandsize" id="bandsizelabel">Band Size</label>
												<input type="text" class="band-size text-field field-width-fix text input" id="bandsize" name="bandsize">
											</div>
											<div class="angelfit-input">
												<label for="bustsize" id="bustsizelabel">Bust Size</label>
												<input type="text" class="bust-size text-field field-width-fix text input" id="bustsize" name="bustsize"> 
											</div>
											<div class="angelfit-button">
												<button class="angelfit-calc-butt btn-26 btn-40-p x-small" id="getmysize">
												<span>Get My Size</span> </button>
												<span><a class="ui-callout clear-calculator" href="javascript:void(0)"><span class="spriteArrow2Right"><em></em> Clear Calculator </span> </a> </span>
											</div>
										</div>
										<div class="angelfit-resultarea">
											<p class="angelfit-result"> </p>
											<a class="ui-callout shop-your-size" href="javascript:void(0)"><span class="spriteArrow2Right"><em></em> Shop Your Size </span> </a>
										</div>
									</div>
								</div>
							</div>
						</div> 
					</div>
            	</div> <!-- DESKTOP -->
			</section>
		</section>
	</div>
</div>

JavaScript

$(function(){
	$("html").addClass("desktop");
});
// angelFit Calculator code
// bust - band = diff
// diff = cupsize
var angelFit = {
	"cupsize": {
		"0": "AA",
		"1": "A",
		"2": "B",
		"3": "C",
		"4": "D",
		"5": "DD",
		"6": "DDD"
	},
	"band": {
		"min": 30,
		"max": 40,
		"user": ""
	},
	"bust": {
		"min": 31,
		"max": 46,
		"user": ""
	}
};

var angelFitCalc = (function() {
	var isDesktop = $("html").hasClass("desktop"),
		$sizeFit,
		bandSize,
		bustSize,
		angelfitCalcButt,
		angelfitResult,
		shopYourSize,
		clearCalculator,
		angelfitErrorBox;

	$sizeFit = (isDesktop) ? $('#desktopSizeFit') : $('#mobileSizeFit');
	bandSize = $sizeFit.find('.band-size');
	bustSize = $sizeFit.find('.bust-size');
	angelfitCalcButt = $sizeFit.find('.angelfit-calc-butt');
	angelfitResult = $sizeFit.find('.angelfit-result');
	shopYourSize = $sizeFit.find('.shop-your-size');
	clearCalculator = $sizeFit.find('.clear-calculator');
	angelfitErrorBox = $sizeFit.find('.ui-alert');

	function clearCalculator() {
		bandSize.val('');
		bustSize.val('');
		angelFit.band.user = "";
		angelFit.bust.user = "";
		angelfitResult.html('');
		shopYourSize.hide();
		clearCalculator.hide();
		angelfitErrorBox.hide();
		angelfitErrorBox.html('');
		bandSize.removeClass('requirement-error');
		bustSize.removeClass('requirement-error');
	};

	// pass in the bust/band sizes
	function showError() {
		var errorObj = {};

		clearCalculator.show();

		// empty submission
		if (angelFit.bust.user === "" && angelFit.band.user === "") {
			errorObj.message = "You haven't entered your measurements.";
			errorObj.elems = [bustSize, bandSize];
			errorObj.calc = "hide";

			clearCalculator.hide();
		// wrong band measurement			
		} else if (angelFit.band.user < angelFit.band.min || angelFit.band.user > angelFit.band.max) {
			errorObj.message = "Please enter a band measurement between 30 and 40.";
			errorObj.elems = bandSize;

		} else if (angelFit.bust.user < angelFit.bust.min || angelFit.bust.user >...