Ziggarat Calculator

by ledlogic

HTML

<h1>Ziggarat Calculator</h1>

<p class="hint">
Uses fractions!
</p>

<div class="if">
<label for="base_top">Base top</label>
<input type="text" size="20" id="base_top" value="0.5" />
<p class="hint">Overlap on top layer</p>
</div>

<div class="if">
<label for="height">Height</label>
<input type="text" size="20" id="height" value="1 5/8" />
<p class="hint">Vertical height between layers</p>
</div>

<div class="if">
<label for="base_offset">Base offset</label>
<input type="text" size="20" id="base_offset" value="0.5" />
<p class="hint">Distance out from top bend for bottom bend</p>
</div>


<div class="if">
<label for="base_bot">Base bottom</label>
<input type="text" size="20" id="base_bot" value="0.5" />
<p class="hint">Overlap on bottom layer</p>
</div>

<div class="">
<button id="calc" class="clear">
Calc
</button>
</div>

<hr class="clear"/>

<textarea id="output"></textarea>

CSS

* {
  font-family: Bahnschrift;
}

input {
  font-size: 20px;
  height: 24px;
  border: 1px solid #060;
  border-radius: 4px;
}

button {
  font-size: 20px;
}

select {
  font-size: 20px;
  height: 28px;
  border: 1px solid #060;
  border-radius: 4px;
}

label {
  color: #060;
  font-weight: 800;
  width: 100%;
  display: inline-block;
}

textarea {
  width: 100%;
  height: 200px;
  font-size: 20px;
  border: 1px solid #060;
  border-radius: 4px;
}

.if {
  border: 1px solid #333333;
  padding: 10px;
  clear: both;
  margin: 10px 0;
}

.if3 {
  padding: 10px;
  margin: 10px 0;
}

.clear {
  clear: both;
}

.hint {
  font-style: italic;
}

.lots th,
.lots td {
  border: 1px solid #333333;
  padding: 4px;
}

.tonsExceeded {
  color: #ff0000;
}

JavaScript

function calcDist() {
  var height = calcFromFraction($("#height").val());
  var base_top = parseFloat($("#base_top").val(),10);
  var base_bot = parseFloat($("#base_bot").val(),10);
  var base_offset = parseFloat($("#base_offset").val(),10);
  var hypotenuse = Math.sqrt(Math.pow(height, 2) + Math.pow(base_offset, 2));
  var tot_dist = base_top + hypotenuse+ base_bot;
  var h = [];
  h.push("height: " + calcToFraction(height));
  h.push("base_top: " + calcToFraction(base_top));
  h.push("base_bot: " + calcToFraction(base_bot));
  h.push("base_offset: " + calcToFraction(base_offset));
  h.push("hypotenuse: " + calcToFraction(hypotenuse));
  h.push("tot_dist: " + calcToFraction(tot_dist));
  $("#output").val(h.join("\n"));
}

function calcFromFraction(str) {
	var pts = str.split(" ");
  var int = parseInt(pts[0], 10);
  var fracpts = pts[1].split("/");
  var num = parseFloat(fracpts[0],10);
  var denom = parseFloat(fracpts[1],10);
  var val = int + num/denom;
  return val;
}

function calcToFraction(val) {
  var int = Math.floor(val);
  var rem = val - int;
  var str = "";
  
  if (int > 0) {
  	str += int + " ";
  }
  var eighths = Math.round(rem * 8);
  if (eighths % 2 != 0) {
  	str += eighths + "/" + 8;	
  } else {
  	var fourths = Math.round(rem * 4);
    if (fourths % 2 != 0) {
    	str += fourths + "/" + 4;
    } else {
    	var halfths = Math.round(rem * 2);
	    if (halfths % 2 != 0) {
    		str += halfths + "/" + 2;
      }
    }
  }
  return str;
}

$(function()  {
	calcDist();
});

$("#calc").on("click", calcDist)