Refactoring

* check card type by looping through an array of cards' data
  (name, pattern) instead of having a separate method for each
  card type
* demo: change all CSS to LESS
* demo: import reset.less inside the main LESS file

css/cards.less

@@ -0,0 +1,133 @@
+@import "reset";
+
+body {
+    color: #333;
+    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
+    font-size: 18px;
+    line-height: 32px;
+}
+
+.cards {
+    overflow: hidden;
+}
+
+.cards li {
+    background-image: url(../images/card_logos.png);
+    background-position: 0 0;
+    float: left;
+    height: 32px;
+    margin-right: 8px;
+    text-indent: -9999px;
+    -moz-transition: all .2s;
+    width: 51px;
+}
+
+.cards li:last-child {
+    margin-right: 0;
+}
+
+form {
+    background-color: #f8f8f8;
+    background: -moz-linear-gradient(#fff, #f8f8f8);
+    border: 5px solid #fff;
+    margin: 62px auto;
+    padding: 12px 24px 24px;
+    width: 287px;
+    -moz-box-shadow: 0 1px 3px #ccc;
+}
+
+form li {
+    margin: 8px 0;
+}
+
+.cards .visa-electron {
+    background-position: 204px 0;
+}
+
+.cards .mastercard {
+    background-position: 153px 0;
+}
+
+.cards .maestro {
+    background-position: 102px 0;
+}
+
+.cards .discover {
+    background-position: 51px 0;
+}
+
+.cards .visa.off {
+    background-position: 0 32px;
+}
+
+.cards .visa-electron.off {
+    background-position: 204px 32px;
+}
+
+.cards .mastercard.off {
+    background-position: 153px 32px;
+}
+
+.cards .maestro.off {
+    background-position: 102px 32px;
+}
+
+.cards .discover.off {
+    background-position: 51px 32px;
+}
+
+form label {
+    color: #555;
+    display: block;
+    font-size: 14px;
+}
+
+form label small {
+    color: #aaa;
+    font-size: 11px;
+    line-height: 11px;
+    text-transform: uppercase;
+}
+
+form input {
+    border: 1px solid #aaa;
+    border-color: #aaa #ddd #ddd #aaa;
+    color: #333;
+    display: block;
+    font-size: 18px;
+    height: 30px;
+    padding: 0 5px;
+    width: 275px;
+    -moz-box-shadow: inset 0 1px 3px -1px #ccc; 
+    -moz-box-sizing: content-box;
+}
+
+.vertical {
+    overflow: hidden;
+}
+
+.vertical li {
+    float: left;
+    width: 140px;
+}
+
+.vertical li:last-child {
+    float: right;
+    text-align: right;
+}
+
+.vertical .or {
+    color: #aaa;
+    float: left;
+    font-size: 12px;
+    margin-left: -8px;
+    margin-top: 32px;
+}
+
+.vertical input {
+    width: 68px;
+}
+
+.vertical li:last-child input {
+    float: right;
+}

index.html

@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <title>Cards</title>
 
-    <link rel="stylesheet" href="css/reset.css">
     <link rel="stylesheet" href="css/cards.css">
 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

js/cards.coffee

@@ -1,44 +1,60 @@
 $ = jQuery
 
 $.fn.cards = (callback) ->
-    is_visa = (number) ->
-        number.match /^4/
+    cards = [
+        {
+            name: 'visa-electron'
+            pattern: /^(4026|417500|4508|4844|491(3|7))/
+        }
+        {
+            name: 'visa'
+            pattern: /^4/
+        }
+        {
+            name: 'mastercard'
+            pattern: /^5[1-5]/
+        }
+        {
+            name: 'maestro'
+            pattern: /^(5018|5020|5038|6304|6759|676[1-3])/
+        }
+        {
+            name: 'discover'
+            pattern: /^(6011|622(12[6-9]|1[3-9][0-9]|[2-8][0-9]{2}|9[0-1][0-9]|92[0-5]|64[4-9])|65)/
+        }
+    ]
 
-    is_visa_electron = (number) ->
-        number.match /^(4026|417500|4508|4844|491(3|7))/
+    check_card = (number) ->
+        for card in cards
+            if number.match card.pattern
+                return callback card.name
 
-    is_mastercard = (number) ->
-        number.match /^5[1-5]/
+        callback ''
 
-    is_maestro = (number) ->
-        number.match /^(5018|5020|5038|6304|6759|676[1-3])/
+    validate_luhn = (number) ->
+        check_digit = number[number.length - 1]
 
-    is_discover = (number) ->
-        number.match /^(6011|622(12[6-9]|1[3-9][0-9]|[2-8][0-9]{2}|9[0-1][0-9]|92[0-5]|64[4-9])|65)/
+        sum = 0
 
-    check_card = (number) ->
-        if is_visa_electron number
-            callback 'visa-electron'
-            return
-        else if is_visa number
-            callback 'visa' 
-            return
-        else if is_maestro number
-            callback 'maestro'
-            return
-        else if is_discover number
-            callback 'discover'
-            return
-        else if is_mastercard number
-            callback 'mastercard'
-            return
+        for digit, n in number.split('').reverse().slice(1).join('')
+            n = parseInt n, 10
+            digit = parseInt digit, 10
+            if n % 2
+                sum += digit
+            else
+                digit *= 2
+                if digit < 10
+                    sum += digit
+                else
+                    sum += parseInt(digit.toString()[0], 10) + parseInt(digit.toString()[1], 10)
 
-        callback ''
-
     this.bind('input', ->
-        number = $(this).val().replace(/[ -]/, '')
-        check_card(number)
+        number = $(this).val().replace /[ -]/, ''
+        validate_luhn number
+        check_card number
     )
 
-    number = $(this).val().replace(/[ -]/, '')
-    check_card(number)
+    number = $(this).val().replace /[ -]/, ''
+    check_card number
+
+    this