acmpesuecc/creditcardverifier

A tool that uses Luhn's Algorithm to verify Credit Card numbers

CreditCardVerifier

CreditCardVerifier uses Luhn's Alogrithm to verify Credit Card and other secure numbers. Checkout the live demo here!

UPDATE: CreditCardVerifier Will now enforce a max cap of 3PRs per issue.

Technology Stack

• HTML
• JavaScript
• CSS

How To Build and Run

• FORK the Repository
• Clone The Repo on your desktop
• Make Changes to the files.

you can edit the html file in any text editor or IDE then save it using the extension .html to view it in your browser as a website

• Push your changes and Intitate a Pull Requests
• Done!!

How do I contribute?

Check out the Contributing Guidelines to learn more!

Is this beginner friendly?

YES!

What if I have a problem?

Contact any of the ACM team members!

Instructions to Build and Run this project in your computers :-

Step 1. Fork this Repository, this will create a Local Copy of this Repository for you to work on your personal GitHub account. Keep a reference to the original project in upstream remote.

Use terminal and write the following commands:

$ git clone https://github.com/<your-username>/<repo-name>
$ cd <repo-name>
$ git remote add upstream https://github.com/<upstream-owner>/<repo-name>

Step 2. Create a new branch and then checkout the branch. Never commit changes on main branch.

$ git checkout -b <branch_name>

or

$ git branch <branch name>
$ git checkout <branch name>

Step 3. Make your changes in the project.

• Add the changes you have made using.

$ git add .

or if you want to add specific files for example:-

$ git add files.txt

this will add all the changes made in the file.

Step 4. Commit the changes you have made.

$ git commit -m "your message"

Now, you are ready to push your work to the original repository.

Step 5. Push the changes you have made. This will pushh all the changes you have made in your local copy to github.

$ git push -u origin <Branch_Name>

Now you have pushed the commits to github.

Step 6. Now you are ready to compare and make a Pull request.

source:- Google images

Press the button and create a PR and wait for mentors to review it.

And you are done. Wait for mentors to merge your PR.

This is one of the Official repositories created by ACM PESUECC for Hacktoberfest 2021!

creditcardverifier's Issues

[ENHANCEMENT] Show Issuing Bank/Service of Credit Card (i.e. Visa, Mastercard, etc)

Is your feature request related to a problem? Please describe.
Not really a problem, but an enhancement. This would be a useful real-life application.

Describe the solution you'd like
The application should tell you if the card is issued by Mastercard, Visa, or American Express. I'd like to implement regex-based validation for each of these, as per these rules -

Actually, that’s a bit of an exaggeration, because credit card numbers actually have some structure to them. All American Express numbers start with 34 or 37; most MasterCard numbers start with 51, 52, 53, 54, or 55 (they also have some other potential starting numbers which we won’t concern ourselves with for this problem); and all Visa numbers start with 4.

taken from CS50x

Describe alternatives you've considered
One could make a request to the various BIN/IIN APIs (for example, this one)

Additional context
no addtional context.

Optimizations and addition of major missing cards

What do you want to see?

More rigourous testing of cards. And also more types of credit / debit cards

Code of Conduct

• I agree to follow this project's Code of Conduct

[ENHANCEMENT] Center the form elements in the page

Center the form elements in the page.

Add more types of Cards to the "Type" field

Is your feature request related to a problem? Please describe.
Currently, only Mastercard, Visa and AMEX card types are returned by the code when verifying the number

Describe the solution you'd like
Add support for more card types (Ex: Discover, JCB, etc)

Creating a dynamic bg

What do you want to see?

Adding a moving background that adds to the aesthetic. We plan making more changes along the way

Code of Conduct

• I agree to follow this project's Code of Conduct

No result coming on clicking enter

What happened?

I enter a number and click the button. No response.

What device are you seeing the problem on?

Desktop

What browsers are you seeing the problem on?

Microsoft Edge

Code of Conduct

• I agree to follow this project's Code of Conduct

Display the "Valid" and "Type" result card only when the form has been submitted

What do you want to see?

When the website is initially loaded, the following card is blank.

Displaying this blank card is unnecessary. The card should only appear when asked to verify.

Code of Conduct

• I agree to follow this project's Code of Conduct

Spelling Mistake in Heading

Describe the bug
The word "Checker" is misspelled as "Chcker" in index.html

To Reproduce
Steps to reproduce the behavior:

1. Open index.html
2. Go to the h1 tag

Expected behavior
Should be spelled correct

Documentation: Add Build and Run instructions in README

What do you want to see?

Add Build and Run instructions in the README file, to help first-time contributors understand how to run the project on their computers.

Code of Conduct

• I agree to follow this project's Code of Conduct

Not Scrolling

The page is not scrolling. The bottom text and button is getting cut off

Bring the Verify button to the line after the input field

Describe the solution you'd like
The verify button should be on a new line, not on the same line.

Add a footer with the repo link

Add a footer at the very bottom of the page linking to this repository

Missing <head> Closing tag

The tag is incorrectly written as

Non standard property zoom

When viewing the website in Firefox, console returns the warning This page uses the non standard property “zoom”. Consider using calc() in the relevant property values, or using “transform” along with “transform-origin: 0 0”.

It would be nice to eliminate this warning

Add a title to the Page

The page does not have a title. Add one!

Center the form elements

Describe the solution you'd like
The form elements should be centered on the page

Add a link to Wikipedia for Luhn's Algorithm

What do you want to see?

Add a link to the Wikipedia page for Luhn's algorithm on the page. The URL is https://en.wikipedia.org/wiki/Luhn_algorithm

Code of Conduct

• I agree to follow this project's Code of Conduct

Add a title to the webpage

Describe the solution you'd like
Add a title to the webpage saying "CreditCardVerifier"

Display card issuer logo depending on the number

What do you want to see?

Display the logo of the card issuer depending on the card number.
Ex: show VISA if it is a VISA card, Amex if Amex, etc.
If the card does not fall into any of the known categories, or is ambiguous, show a blank dummy card

Code of Conduct

• I agree to follow this project's Code of Conduct

Add Image upload + OCR

What do you want to see?

Allow uploading images of cards to the website. Then use any available OCR tool to extract the numbers from the card and verify them.

Use of a backend like firestore is allowed if needed

Code of Conduct

• I agree to follow this project's Code of Conduct

Form does not submit on pressing enter key

What happened?

When a credit card number is entered into the textbox, pressing enter does not submit the form. Instead, it refreshes the page. Ideally, it should work such that pressing the enter key submits the form and displays the result.

What device are you seeing the problem on?

Desktop

What browsers are you seeing the problem on?

Brave

Code of Conduct

• I agree to follow this project's Code of Conduct

Update User Interface.

The user interface is garbage. It is upto your discretion to make it look better.

Some suggestions: (Not binding)

1. Change background
2. Incorporate a library similar to Bootstrap to make the User interface look better
3. Anything else that could make it look good

The bounty points you recieve will depend on the extent of imporvments you make!

Add a favicon

What do you want to see?

The website would look great with a favicon! For reference, a favicon is the image that apperas in place of the current placeholder globe.

You are free to choose your own design. Here are some suggestions!

• A stack of money with wings
• A bag of money
• A card
• A letter C

Code of Conduct

• I agree to follow this project's Code of Conduct

Add a margin at the bottom of the page

When scrolling to the bottom of the page, there is no margin between the end of the black box and the end of the page. It would be nice to have one matching the margin at the top of the page

Change Text Color

The text color in the field to enter the Credit Card number is white on a white text box and is not visible. Change the color to make it visible

Make the input field only accept numbers

Describe the bug
Currently, the input field accepts text, special characters and numbers

Expected behavior
Only number should be allowed to be entered

Additional context
Changing the input type might help

Write about Luhn's Algorithm

Below the form, add a couple of lines explaining what Luhn's algorithm is and how it works. Link the any external resource as well

Loading insecure content on a secure page

After visiting the deployed page in https://acmpesuecc.github.io/CreditCardVerifier, the console gives us the error message Loading mixed (insecure) display content “http://africalegalnetwork.com/nigeria/wp-content/uploads/sites/19/2017/08/Banking.jpg” on a secure page

This is due to the background image coming from an insecure (http) website while ours is hosted on the more secure https.

To fix this, head to unsplash.com or any similar site and find a royalty free image for the background. Provide a link to that image instead making sure that it has the https prefix

Improve UI

What do you want to see?

Improve the UI by messing with the html and css files

Code of Conduct

• I agree to follow this project's Code of Conduct

Add examples of other use cases (Apart from credit cards)

What do you want to see?

The section that contains examples of credit card numbers is great. Below that we should have another section that contains examples of other types of numbers that can be verified in the same way. For example: IMEI number, Canadian Social Security numbers, etc.

Code of Conduct

• I agree to follow this project's Code of Conduct

Refactor Codebase

The following files need to be moved into different directories inorder to be more clean and allow GIthub pages deployment

1. Move index.html to the repository root (/)
2. Move all *.js files into a /src/js folder
3. Move all *.css files into a /src/css folder

Make sure to update all corresponding tags in the HTML.