JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="container">

  <form id="spindleSpacerCalculator">
    <div class="form-group">
      <label for="staircaseWidth">Staircase Width</label>
			<div class="input-group">
      	<input type="number" class="form-control" id="staircaseWidth" min="0" value="0" />
				<span class="input-group-addon">mm</span>
			</div>
      <small id="emailHelp" class="form-text text-muted hidden-xs-up">We'll never share your email with anyone else.</small>
    </div>
		<div class="form-group">
      <label for="spindleWidth">Spindle Width</label>
			<div class="input-group">
      	<input type="number" class="form-control" id="spindleWidth" min="0" value="0" />
				<span class="input-group-addon">mm</span>
			</div>
      <small id="emailHelp" class="form-text text-muted hidden-xs-up">We'll never share your email with anyone else.</small>
    </div>
		<div class="form-group">
      <label for="spindleCount">Spindle Count</label>
      <input type="number" class="form-control" id="spindleCount" min="0" value="0" />
      <small id="emailHelp" class="form-text text-muted hidden-xs-up">We'll never share your email with anyone else.</small>
    </div>
    <button type="submit" class="btn btn-primary">Calculate</button>
  </form>
	
	<div class="modal fade" id="spindleModal" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Result</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					
				</div>
				<div...

SCSS

/* bootstrap vendors
-------------------------------------------------- */

// core variables and mixins
@import "https://raw.githubusercontent.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.min.css";

/* test
-------------------------------------------------- */

BODY {
  padding: 15px 0;
	
}

JavaScript

/**
 ** jQuery functions
 **/
(function($) {

	$('head').append('<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">');

	$("#spindleSpacerCalculator").submit(function( event ) {
		
		var W = parseInt($("#staircaseWidth").val());
		var S = parseInt($("#spindleWidth").val());
		var C = parseInt($("#spindleCount").val());
		
		var X = (W-(S*C))/(C+1);
		
		$("#spindleModal .modal-body").html( W + "mm - (" + S + "mm x " + C + ") / (" + C + " + 1) = " + X + "mm" );
		
		$("#spindleModal").modal('show')
		
		event.preventDefault();
	});

})(jQuery);