-1

As title says; TL;DR - creating credit card app, built the logic to check the card and that works, my issue is linking the HTML and JS.

I have built this app for fun using JavaScript to deepen my knowledge but I'm stuck. What I want to happen is when a user inputs a credit card number, there to be some kind of success message, like the background turns green, or red if it doesn't meet the criteria. The algo being used is Luhn's method to validate.

https://learnersbucket.com/examples/javascript/credit-card-validation-in-javascript/#:~:text=Validating%20credit%20card%20in%20javascript%20with%20Luhn%27s%20algorithm.&text=Get%20a%20double%20of%20every,divisible%20then%20it%20is%20valid.

Project is here: https://github.com/Chaffexd/creditCardApp

This is my HTML:

<div class="card-body">
            <h4>Validate a credit card</h4>
            <form id="information">
                <div class="box">
                    <input id="credit-card-number" type="text" placeholder="Enter a credit card number">
                </div>
                <div class="validate">
                    <button id="check">Validate</button>
                </div>
            </form>
        </div>

Using the above link as an example, my algorithm is different but the same logic applies. How can I allow a user to input a 16 digit card number, then click validate and for the function to run and then return success/error.

Apologies, I have researched this for several hours and attempted multiple different routes but it just can't click in my head. Would appreciate any help on this.

Chaffexd
  • 56
  • 5

1 Answers1

0

Reading the code it seems the checkCreditCard is returning response object with success and errors. Please try the below code:

check.addEventListener('click', (e) => {
  e.preventDefault();
  var response = validateCred(cardNumber.textContent.split(""));
  console.log(check)

  if(response.success) {
    check.style.backgroundColor = "green"
    check.classList.add('valid') # or add class
  }
  else {
    check.style.backgroundColor = "red"
    check.classList.remove('valid') # or remove class
 }
})
Payal
  • 170
  • 6