CodePen Embed - CSS Barcode Generator

<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS Barcode</title>
		<link rel="stylesheet" href="./custom.css">
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
	</head>
	<body>
		<div class="holder">
			<div id="red-strike"></div>
			<div id="upc-a">
				<div id="upc-wrap">
					<!--NOTE: the CSS structure is odd due to: http://stackoverflow.com/questions/5256533/a-space-between-inline-block-list-items -->
					<!-- begin UPC -->
					<div 
					class="m e long"></div><div 
					class="m o long"></div><div 
					class="m e long"></div><!--
Quiet Zone
--><div class="l"><!-- 
begin L --><div 
					
					id="l1"><div
					
					class="m o"></div><div 
					class="m o"></div><div 
					class="m o"></div><div 
					class="m e"></div><div 
					class="m e"></div><div 
					class="m o"></div><div 
					class="m e"><!--

 --></div></div><div 
				id="l2"><div
				
				class="m o"></div><div 
				class="m o"></div><div 
				class="m e"></div><div 
				class="m o"></div><div 
				class="m o"></div><div 
				class="m e"></div><div 
				class="m e"><!--

 --></div></div><div 
				id="l3"><div
				
				class="m o"></div><div 
				class="m o"></div><div 
				class="m o"></div><div 
				class="m e"></div><div 
				class="m e"></div><div 
				class="m o"></div><div 
				class="m e"><!--

 --></div></div><div 
				id="l4"><div
				
				class="m o"></div><div 
				class="m e"></div><div 
				class="m o"></div><div 
				class="m e"></div><div 
				class="m e"></div><div 
				class="m e"></div><div 
				class="m e"><!--

 --></div></div><div 
				id="l5"><div
				
				class="m o"></div><div 
				class="m o"></div><div 
				class="m e"></div><div 
				class="m o"></div><div 
				class="m o"></div><div 
				class="m e"></div><div 
				class="m e"><!--

 --></div></div><div 
				id="l6"><div
				
				class="m o"></div><div 
				class="m e"></div><div 
				class="m o"></div><div 
				class="m e"></div><div 
				class="m e"></div><div 
				class="m e"></div><div 
				class="m e"><!--

end L -->
				</div></div></div><!--
begin M
--><div 
				class="m o long"></div><div 
				class="m e long"></div><div 
				class="m o long"></div><div 
				class="m e long"></div><div 
				class="m o long"></div><!--
end M
--><div class="r"><!-- 
begin R --><div 
				
				id="r1"><div
				
				class="m o"></div><div 
				class="m e"></div><div 
				class="m e"></div><div 
				class="m e"></div><div 
				class="m o"></div><div 
				class="m e"></div><div 
				class="m e"><!--

 --></div></div><div 
				id="r2"><div
				
				class="m o"></div><div 
				class="m o"></div><div 
				class="m e"></div><div 
				class="m o"></div><div 
				class="m o"></div><div 
				class="m e"></div><div 
				class="m e"><!--

 --></div></div><div 
				id="r3"><div
				
				class="m o"></div><div 
				class="m e"></div><div 
				class="m e"></div><div 
				class="m o"></div><div 
				class="m e"></div><div 
				class="m e"></div><div 
				class="m e"><!--

 --></div></div><div 
				id="r4"><div
				
				class="m o"></div><div 
				class="m e"></div><div 
				class="m e"></div><div 
				class="m e"></div><div 
				class="m e"></div><div 
				class="m o"></div><div 
				class="m e"><!--

 --></div></div><div 
				id="r5"><div
				
				class="m o"></div><div 
				class="m e"></div><div 
				class="m e"></div><div 
				class="m o"></div><div 
				class="m e"></div><div 
				class="m e"></div><div 
				class="m e"><!--

 --></div></div><div 
				id="r6"><div
				
				class="m o"></div><div 
				class="m e"></div><div 
				class="m o"></div><div 
				class="m e"></div><div 
				class="m e"></div><div 
				class="m e"></div><div 
				class="m e"><!--

end R 
--></div></div></div><!--
Quiet Zone
--><div 
				class="m e long"></div><div 
				class="m o long"></div><div 
				class="m e long"></div>
				<!-- end UPC -->		
			</div><!-- end upc-wrap -->
			
			<div id="l-digits" class="digits">20626</div>
			<div id="r-digits" class="digits">72838</div>
			</div><!-- end upc-a -->
			
			<div id="query">
				Type barcode #: <input id="barcodenum" type="text" name="barcodenum" maxlength="11" />
				
				<p class="instructions">
					<strong>UPC-A barcodes</strong> have 12 digits.
				</p>
				<p>
					<a href="http://en.wikipedia.org/wiki/Universal_Product_Code">First digit is UPC code type. Next five is manufacturer number. The next five is product number. Last digit is calculated checksum.</a>
				</p>
				<p>
					This barcode generator takes 11 digits and prints 10 digits (5 manufacturer and 5 product number) below. The last digit is automatically calculated. All 12 digits are reflected in the barcode graphic.
				</p>
				<p id="result">
					You entered <span id="entered_bc">x</span>. The checksum digit was <span id="calc_check">y</span>. Your barcode above is encoded as <span id="all_digits">z</span>.
				</p>
			</div>
		</div>
	</body>
</html>

/* css barcode */
/* by rexfeng 2012 */

html, body {height: 400px;}

body {
	background-color: #fff;
	padding: 1px;
	color: #000;
	font-family: Helvetica, Arial;
}

.holder {
	width: 280px;
	position: relative;
	margin: 30px auto;
}

#query {
	padding: 15px;
	width: 280px;
	background: #eee;
	border-radius: 5px;
	border: 1px solid #ccc;
	color: #888;
	font-size: 13px;
	margin-top: 30px;
}

#query a {
	text-decoration: none;
	color: blue;
}

#barcodenum {
}

.instructions {
	color: #333;
}

#upc-a {
	background: #eee;
	border-radius: 5px;
	border: 1px solid #ccc;
	width: 285px;
	padding: 13px;
}

#upc-wrap {
	width: 285px; /* 95 *3 */
	height: 186px; /* 62 *3 */
}

.m { /* module 1px *3 width */
	width: 3px;
	height: 179px;  /* 186 / 244 * 235 = 179px */
	display: inline-block;
	vertical-align: top;
}

.long {
	height: 186px;
}

.o {
	background-color: #fff;
}

.e {
	background-color: #000;
}

.l {
	display: inline-block;
}

.r {
	display: inline-block;
}

.r .o.m {
	background-color: #000;
}

.r .e.m {
	background-color: #fff;
}

#l1, #l2, #l3, #l4, #l5, #l6 {
	display: inline-block;
}

#r1, #r2, #r3, #r4, #r5, #r6 {
	display: inline-block;
}

.digits {
	font-family: monospace, Courier;
	font-size: 2em;
	display: inline;
	position: relative;
	top: -10px;
	letter-spacing: 3px;
}

#l-digits {
	margin-left: 20px;
}

#r-digits {
	margin-left: 24px;
}

#red-strike {
	width: 301px;	
	height: 3px;
	background-color: red;
	position: absolute;
	margin: 100px 30px 0 22px;
}

$(document).ready(function() {
	// css barcode w/ js
	// by rexfeng 2012

	$('#result').hide(); // set initially hidden
	$('#red-strike').hide(); // set initially hidden

	$('input[name=barcodenum]').keyup(function() {
		var bcnum = $('input[name=barcodenum]').val();
		var intcheck = /^\d+$/; // regex only 0-9
		
		if ( (intcheck.test(bcnum)) && (bcnum.length == 11) ) {

			// update graphics for first 11
				var elements = ['l1','l2','l3','l4','l5','l6','r1','r2','r3','r4','r5'];

				jQuery.each(elements, function(i, val) {
					var code_update = bcnum.substring(i,i+1);
					var bcx = eval("bc".concat(code_update));
					$("#" + this).html(bcx);
				});

			// calculate last digit and update

				var bcdigits = bcnum.split('');

				var checksum_s1 = 0; //init odd holder
				var checksum_s2 = 0; //init even holder

				jQuery.each(bcdigits, function(i,val){
					if(i%2 == 0) {
						checksum_s1 += parseInt(val);
					} else {
						checksum_s2 += parseInt(val);
					}
				});

				var checksum_s3 = checksum_s1*3 + checksum_s2;

				var s3_string = checksum_s3.toString();
				var s3_last = s3_string.substring(s3_string.length - 1);

				if (s3_last == "0") {
					$("#r6").html(bc0);
					var diff = 0;
				} else {
					var diff = 10 - parseInt(s3_last);
					var diff_bc = eval("bc".concat(diff));
					$("#r6").html(diff_bc);
				};

			// update digits displayed
			// by rexfeng 2012
				$('#l-digits').text(bcnum.slice(1,6));
				$('#r-digits').text(bcnum.slice(6,11));

			// toggle hidden fields
				$('#red-strike').hide(); // set hidden
				$("#entered_bc").text(bcnum);
				$("#calc_check").text(diff);
				$("#all_digits").text(bcnum + diff);
				$('#result').show();

		} else {
			
			// error msg
				$('#l-digits').text("Enter digits");
				$('#r-digits').text("");
				$('#red-strike').show();
				$('#result').hide();
		}
	});

// define barcode graphics
		var bc0 = "<div \
						 class=\"m o\"><\/div><div \
						 class=\"m o\"><\/div><div \
						 class=\"m o\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m o\"><\/div><div \
						 class=\"m e\">\
						 <\/div>";

		var bc1 = "<div \
						 class=\"m o\"><\/div><div \
						 class=\"m o\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m o\"><\/div><div \
						 class=\"m o\"><\/div><div \
						 class=\"m e\">\
						 <\/div>";

		var bc2 = "<div \
						 class=\"m o\"><\/div><div \
						 class=\"m o\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m o\"><\/div><div \
						 class=\"m o\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m e\">\
						 <\/div>";

		var bc3 = "<div \
						 class=\"m o\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m o\"><\/div><div \
						 class=\"m e\">\
						 <\/div>";

		var bc4 = "<div \
						 class=\"m o\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m o\"><\/div><div \
						 class=\"m o\"><\/div><div \
						 class=\"m o\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m e\">\
						 <\/div>";

		var bc5 = "<div \
						 class=\"m o\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m o\"><\/div><div \
						 class=\"m o\"><\/div><div \
						 class=\"m o\"><\/div><div \
						 class=\"m e\">\
						 <\/div>";

		var bc6 = "<div \
						 class=\"m o\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m o\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m e\">\
						 <\/div>";

		var bc7 = "<div \
						 class=\"m o\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m o\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m e\">\
						 <\/div>";

		var bc8 = "<div \
						 class=\"m o\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m o\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m e\">\
						 <\/div>";

		var bc9 = "<div \
						 class=\"m o\"><\/div><div \
						 class=\"m o\"><\/div><div \
						 class=\"m o\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m o\"><\/div><div \
						 class=\"m e\"><\/div><div \
						 class=\"m e\">\
						 <\/div>";

});

This Pen is owned by JFarrow on CodePen.

See more by @JFarrow on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.