Bar code scanner and credit card reader

fiddle.html

<h1>Bar code scanner and credit card reader</h1>

<p id="barcode" style="display:none;"><strong>Bar code:</strong> <span></span></p>

<div id="card" style="display:none;">
	<h3>Card</h3>
	<p><strong>Number</strong></p>
	<p id="card-number"></p>
	
	<p><strong>Due Date</strong></p>
	<p><span id="card-month"></span>/<span id="card-year"></span></p>
</div>

fiddle.js

var isTypingBarcode = false
var barcode = ''
$(document).on('keydown.barcode', function(e) {
	var value = String.fromCharCode(e.keyCode)
	if (/\d/.test(value)) {
		barcode += value
		isTypingBarcode = true
	}
	else {
		if (isTypingBarcode && barcode.length === 13 && /\t/.test(value)) {
			$('#barcode span').text(barcode)
			$('#barcode').show()
		} else {
			isTypingBarcode = false;
			barcode = ''
		}
	}
})

var isTypingCard = false;
var cardInfo = '';
$(document).on('keydown.card', function(e) {
	var value = String.fromCharCode(e.keyCode)
	if (/º/.test(value)) {
		isTypingCard = true
	}

	if (!isTypingCard) {
		cardInfo = ''
		return
	} else {
		cardInfo += value
		if (/¿/.test(value)) {
			cardInfo = cardInfo.replace(/º|¿/g, '').split('»')
			var cardNumber = cardInfo[0]
			var cardMonth = cardInfo[1].substr(2,2)
			var cardYear = cardInfo[1].substr(0,2)
			$('#card-number').text(cardNumber)
			$('#card-month').text(cardMonth)
			$('#card-year').text(cardYear)
			$('#card').show()
			cardInfo = ''
			isTypingCard = false
		}
	}
})

fiddle.manifest

name: Bar code scanner and card reader
description: Listen to inputs
authors:
  - Breno Calazans
normalize_css: no