<!DOCTYPE html>
<html>
	<head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <link rel="stylesheet" href="style.css" />
        <script src='script.js'></script>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<title>Knitting Gauge Calculator</title>
	</head>

	<body>
		<div id="header">
			<h1 class="keylimepie">Knitting Gauge Calculator</h1>
			<h2 class="keylimepie">By <a href="http://about.me/gracenut">Haley</a></h2>
		</div>
		<div id="contain" class="box">
			<div id="left" class="box">
				<h1>Gauge Finder</h1>
				<div id="swatch" class="box">
					<h2>Swatch Info</h2>
					<input type="radio" name="opt" value="inch" class="op" checked>Inches
					<input type="radio" name="opt" value="centimeter" class="op">Centimeters<br />
					<input type="text" placeholder="width" id="wid" class="smallbox" /> X
					<input type="text" placeholder="length" id="len" class="smallbox" /><br /><br />
					<input type="text" placeholder="stitches" id="sts" class="smallbox" /> X
					<input type="text" placeholder="rows" id="row" class="smallbox" /><br /><br />
					<input type="button" value="Calculate" id="cal" class="smallbox"/>
				</div>
				<h3 class="hide" id="hid"></h3>
			</div>
			<div id="right" class="box">
				<h1>Instructions</h1>
				<div class="piece" id="one">
					<div class="shown">
						<h2>Input</h2>
					</div>
					<div class="open">
						<p>
						First, knit a gauge swatch and enter it's dimensions on the left.
						</p>
					</div>
				</div>
				
				<div class="piece" id="two">
					<div class="shown">
						<h2>Calculate</h2>
					</div>
					<div class="hidden">
						<p>
						Click calculate and receive your gauge to the second decimal point.
						</p>
					</div>
				</div>
				
				<div class="piece" id="three">
					<div class="shown">
						<h2>Create!</h2>
					</div>
					<div class="hidden">
						<p>
						Now that you know your gauge, you are able to follow and/or create patterns with precise accuracy!
						</p>
					</div>
				</div>
				
				<div class="piece" id="four">
					<div class="shown">
						<h2>What is a Knitting Gauge?</h2>
					</div>
					<div class="hidden">
						<p>
							Don't know what a knitting gauge is, or how to use it?
							Check out this <a href="http://knitting.about.com/od/learntoknit/a/gauge_swatch.htm" target="_blank"><strong>article</strong></a>
						</p>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
body {
	background-color: #333;
	color: #333;
	font-family: Trebuchet MS, Tahoma, Tempus Sans, Arial, sans-serif;
	font-size: 12px;
	text-align: left;
}

a:link, a:visited {
	color: #333;
	text-decoration: none;
}

#header {
	position: fixed;
	top: 0;
	margin-top: 0;
	width: 100%;
	background-color: #3B3B3B;
}

.keylimepie {
	margin: 0;
	padding: 0;
	text-align: center;
}

p {
	padding-left: 10px;
}

.box {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}

.smallbox {
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    border-radius: 15px;
    background-image: none;
    width: 100px;
    height: 25px;
    text-align: center;
}

#swatch {
	border: 2px dashed #4D4D4D;
	margin: 0 15px;
	padding-bottom: 15px;
}

.piece {
	cursor: pointer;
}

.shown {
	background-color: #8EF2FE;
	background: -webkit-gradient(linear, left top, left bottom, from(#8FF7FF), to(#8EE1EE));
	background: -moz-linear-gradient(top,  #8FF7FF,  #8EE1EE);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8FF7FF', endColorstr='#8EE1EE');
	height: 30px;
}

.shown:hover {
	background-color: #8FF7FF;
	background: -webkit-gradient(linear, left top, left bottom, from(#8FE2EF), to(#8FF7FF));
	background: -moz-linear-gradient(top,  #8FE2EF,  #8FF7FF);
	color: #4D4D4D;
}

.hidden {
	display: none;
}

.hidden p a:hover {
	color: #666;
}

.open {
	border-top: 2px dashed #4D4D4D;
	border-bottom: 2px dashed #4D4D4D;
}

#contain {
	margin: 80px auto;
	height: 410px;
	width: 600px;
	background-color: #00ABC1;
}

#left {
	position: relative;
	float: left;
	margin-left: 20px;
	margin-top: 20px;
	height: 370px;
	width: 275px;
	background-color: #27E6FF;
	text-align: center;
}

.op {
	padding: 0;
	margin: 0 0 15px 0;
}

#cal {
	border: none;
	background: -webkit-gradient(linear, left top, left bottom, from(#8FF7FF), to(#8DE2DD));
	background: -moz-linear-gradient(top,  #8FF7FF,  #8DE2DD);
	color: #333;
	cursor: pointer;
}

#cal:hover {
	background: -webkit-gradient(linear, left top, left bottom, from(#8DE2DD), to(#8FF7FF));
	background: -moz-linear-gradient(top,  #8DE2DD,  #8FF7FF);
	color: #4D4D4D;
}

.hide {
	display: none;
}

.showWrong {
	display: block;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
	padding: 10px;
	width: 200px;
	height: 40px;
	color: red;
	text-align: left;
	background-color: #8FF7FF;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    border-radius: 15px;
}

.showRight {
	display: block;
	overflow: auto;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
	padding: 10px;
	width: 200px;
	height: 40px;
	color: #333;
	text-align: left;
	background-color: #8FF7FF;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    border-radius: 15px;
}

.showRight::-webkit-scrollbar {
	border-radius: 5px;
}

.showRight::-webkit-scrollbar-track {
	border-radius: 5px;
	background-color: #8DE2DD;
	width: 6px;
}

.showRight::-webkit-scrollbar-track:horizontal {
	display: none;
}

.showRight::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background-color: #00ABC1;
	width: 6px;
}

.showRight::-webkit-scrollbar-corner {
	border-radius: 5px;
}

#right {
	position: relative;
	float: right;
	margin-right: 20px;
	margin-top: 20px;
	height: 370px;
	width: 275px;
	background-color: #27E6FF;
	overflow: hidden;
}

h1 {
	text-align: center;
}

#right h2 {
	font-size: 15px;
	margin: 0;
	padding-left: 20px;
}

//Starting it up...
$(document).ready(function() {
	//right side stuff
    //Selecting all the divs with the "shown" class
	var $shown = $('.shown');
    //and grabbing all of the divs that follow a "shown" div
	var $hid = $('.shown + div');
//This makes the $shown and $hid objects into basically an accordion, but I wasn't very familiar with the jQuery UI when I wrote this, so I made my own.
	$shown.click(function(){
         //Pretty straight-forward, this checks to see if the div after the one that is clicked on already has the class "open"
		if ($(this).next().hasClass("open")){
            //If it does, then the class is removed and the div slid up out of sight
			$(this).next().removeClass("open").slideUp(350); 
		}
		else {
             //Otherwise, the div that *does* have the "open" class has the class removed and is slid up,
			$(".open").removeClass("open").slideUp(350);
            // While the div that we're working with is given the "open" class and is slid down into view
			$(this).next().addClass("open").slideDown(350); 
		}
	});
	//left side stuff
    //An array of the inputs from the Gauge Finding side of the program
	var inputs = [$("#sts"), $("#wid"), $("#row"), $("#len")]; 
	//When the 'Calculate' button is clicked, this function comes in to play
	$("#cal").click(function(){
        //This checks to see which of the radio buttons is checked; 'Inches' or 'Centimeters'
		var $op = ($("input[name=opt]:checked").val());
        //This is the primary function of the program, it does the arithmetic of finding your gauge by finding how many stitches and rows you are using per unit of knitting
		var perInch = function perInch(stitches, width, rows, length) {
            //The number of stitches per unit is equal to the number of stitches divided by the width, then `.toFixed(2)` to keep it down to two decimal points
			var stsPerIn = (parseFloat(stitches)/parseFloat(width)).toFixed(2);
            //Rows per unit is the same basic thing, except it is rows divided by length
			var rowsPerIn = (parseFloat(rows)/parseFloat(length)).toFixed(2);
            //This is where the radio button value comes in; I tack on either "inches" or "centimeters" to the end of this sentence using `$op`
			var ans = "Your gauge is " + stsPerIn + " stitches, " + rowsPerIn + " rows per square " + $op;
			return ans;
		};
		
		for(i = 0; i < 4; i++){
			if (inputs[i].val().length === 0){
				if($("#hid").hasClass("hide")){
					$(".hide").removeClass("hide").addClass("showWrong").text("Please fill in all the Swatch Info fields");
					return;
				}
				else if($("#hid").hasClass("showRight")){
					$(".showRight").removeClass("showRight").addClass("showWrong").text("Please fill in all the Swatch Info fields");
					return;
				}
				else if($("#hid").hasClass("showWrong")){
					$(".showWrong").text("Please fill in all the Swatch Info fields");
					return;
				}
			}
			else if (isNaN(inputs[i].val()) === true){
				$("#hid").removeClass().addClass("showWrong").text("All the inputted values should be numeric");
				return;
			}
			else if (i === 3){
				$("#hid").removeClass().addClass("showRight").text(perInch($("#sts").val(), $("#wid").val(), $("#row").val(), $("#len").val()));
			}
		}
	});
});
	
Created from scratch
196 forks
30779 views

Browse more Codebits