This project was based on a graded test using the gradr platform. The goal of the mini-project is to design a web-based application that is capable of accepting credit card details of customers for online purchases. The technology put together to achieve these are Html, Css, and Javascript. Though a larger share of it solely based on Javascript. The web application accepts a mastercard and visa card for transactions.
Here is how it works. When a card input is entered into the card number input space provided, the app checks to confirm the card type base on the first digit keyed in. It then goes on to check if the card is a Mastercard or Visa card type. This is achieved by looking into the very first digit that is entered. Five (5) is for Mastercard and four (4) is for Visa card. The card type automatically changes to the right one, together with the card logo. Figure 1 below shows an input changing the card type to a Mastercard view.
Once this is accomplished, it goes on to also verify the validity of the 15 digit card number using the Luhn Algorithm to achieve this. The Luhn Algorithm has been around for a long time now, and it is used to validate a credit card number or other identifying numbers like Social Security Numbers. By using this, the digit goes through the calculation and verify if the numbers are valid. If it isn’t, it strikes a line through and otherwise if it is.
The concept is basically to validate card numbers like it has been explained above even though a lot can still be exploited with this as I look forward to adding spices to it in the later future.
I hope to see you around till then and please do feel free to make use of the comment box below. It really means a lot. Bye for now.





Wait while comment section loads...