Luhn Algorithm for Dummies

Daniel Jiménez — Fri, 28 Feb 2025 14:22:07 +0000

Are you crying until midnight trying to understand how to do the Luhn Algorithm?
Are you trying hard for hours and then giving up when your only error was about when to double?

This is your place. Here, I will explain to you how to do it with JavaScript. From a dummy to another dummy. Let's go.

What the #### is the Luhn Algorithm?

To make a long story short, it’s an algorithm used for validating credit cards. Basically, if at the end your result is 0, you have a valid card. If not, be ready because Ocean’s Eleven is entering your bank.

For implementing the algorithm in code, you have to take into consideration these 5 steps:

1) You need to iterate through each number from right to left (aka backwards).

2) Then, you multiply by 2 only the digits in even positions (starting from the right).

Imagine you have '2097'. We would multiply 9 and 2 by 2. The other numbers remain unchanged.

3) For the digits you’ve doubled, if they are greater than or equal to 10, you have to subtract 9 from them.

4) Now, it’s time to sum everything up.

5) You need to get the module of the division of your total sum by 10. The module is what’s left after division.

For example, if you divide 10 by 2, the result is 5 and the module is 0 because there’s nothing left. But if you divide 9 by 2, the result is 4 and the module is 1 because 2 * 4 is 8, and you’re missing 1 to reach 9.

Luhn Algorithm Explanation

Let’s Code It in JavaScript!
Now, I will show you the complete code and then explain it. This first code is the best way to understand it because it’s quite raw. There are other ways of doing it with array methods, but let’s start with this first.

const luhnAlgorithm = (arr) => {
    let sum = 0;
    let shouldDouble = false;

    for (let i = arr.length - 1; i >= 0; i--) {
        let digit = arr[i];
        if (shouldDouble) {
            digit *= 2;
            if (digit > 9) digit -= 9;
        }
        sum += digit;
        shouldDouble = !shouldDouble;
    }

    console.log("Total sum:", sum);
    return sum % 10 === 0;
};

// Example credit card numbers (as arrays)
const validCreditCard = [4, 5, 3, 9, 6, 7, 7, 9, 0, 8, 0, 1, 6, 8, 0, 8]; // Valid
const invalidCreditCard = [3, 5, 3, 9, 6, 7, 7, 9, 0, 8, 0, 1, 6, 8, 0, 8]; // Invalid

console.log(luhnAlgorithm(validCreditCard)); // true
console.log(luhnAlgorithm(invalidCreditCard)); // false

Code Explanation

It wasn’t so hard, was it? I’ll explain it a little bit.

Step 1: The iteration from right to left is solved by using a for loop with a decrement (i--).

Step 2: We use a variable called shouldDouble, which is a boolean that changes in each iteration. It’s false in the beginning because the last number is never multiplied. Remember, that’s the reason why we start from the end.

Step 3: If a digit is greater than 9 after doubling, we subtract 9 from it: if (digit > 9) digit -= 9;. That’s all.

Step 4: We add the digit to the total sum: sum += digit;.

Step 5: The result is checked by returning sum % 10 === 0. If the remainder is 0, the credit card number is valid.

Alternative Solutions

There are other ways of solving this exercise that involve more methods. For example, you can use array methods like map, reduce, and reverse to achieve the same result. If you’re interested, check out this (https://www.30secondsofcode.org/js/s/luhn-check/) for an alternative implementation.

Rainbow infinite carousel tutorial (CSS)

Daniel Jiménez — Fri, 28 Feb 2025 10:01:16 +0000

We have seen infinite carousels in all directions and with all kinds of functions. The most typical one might be a website displaying the logos of its ambassadors, but there are many original uses for this, such as showcasing an art gallery. The only limit is your imagination!

I will explain the easiest way I have found to create this effect. If you want a sneak peek of the final result, check out my CodePen at the end of this file. ;)

The first thing we need to do for this project is to create two "divs." A friendly reminder: use the semantic tag that best suits your needs (aside, section or article could be great choices depending on your website). We are going to fill these divs with squares, but you can use whatever you like (images, etc.).

<section>
  <div class="container">
    <div class="carousel">
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
    </div>
</section>

If you've done this correctly, you won't see anything yet. ;) But that will change soon. Let's add some styles.

.carousel {
  display: inline-flex;
}

.carousel .square {
  height: 200px;
  width: 300px;
  margin: 0;
}
.carousel .square:nth-child(1) {
  background: red;
}
.carousel .square:nth-child(2) {
  background: orange;
}
.carousel .square:nth-child(3) {
  background: yellow;
}
.carousel .square:nth-child(4) {
  background: green;
}
.carousel .square:nth-child(5) {
  background: blue;
}
.carousel .square:nth-child(6) {
  background: indigo;
}
.carousel .square:nth-child(7) {
  background: violet;
}

You can check

:nth-child() - CSS: Cascading Style Sheets | MDN

The :nth-child() CSS pseudo-class matches elements based on the indexes of the elements in the child list of their parents. In other words, the :nth-child() selector selects child elements according to their position among all the sibling elements within a parent element.

developer.mozilla.org

if you need a refresher on this pseudo-class.

Now we have our carousel! Let's animate it. We really love rocking that CSS!

.carousel {
  display: inline-flex;
  animation: 5s infinite-carousel infinite linear;
}

@keyframes infinite-carousel {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

You can check

@keyframes - CSS | MDN

La regla arroba @keyframes permite a los autores controlar los pasos intermedios en una secuencia de animación CSS mediante el establecimiento de keyframes (o puntos de trayectoria) a lo largo de la secuencia de animación que debe ser alcanzado por determinados puntos durante la animación. Esto le da un control más específico sobre los pasos intermedios de la secuencia de animación que se obtiene al dejar que el navegador maneje todo automáticamente.

developer.mozilla.org

for more information.

The rainbow is moving, right? :) However, it still doesn't have the infinite effect, and when it ends, it jumps back to the same position. The keyframes name might seem a bit grand for a simple translation animation, but we will fix that soon.

Now comes the magic. The trick to making this effect infinite is to have not just one but two carousels playing the same animation simultaneously! The key is that both carousels are placed inline next to each other, so even though the animation restarts, we don't see the reset. We will achieve this with pseudo-classes and the overflow property.

Let's start by adding another carousel. Your final HTML should look like this:

  <section>
    <div class="container">
      <div class="carousel">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
      </div>
      <div class="carousel">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
      </div>
    </div>
  </section>

Now, let's align them properly:

.container {
  overflow: hidden;
  padding: 40px 0;
  white-space: nowrap;
  position: relative;
  font-size: 0;
  line-height: 0;
}

The white-space: nowrap; property ensures the elements are displayed inline. The overflow: hidden; prevents horizontal scrolling and keeps the effect visible. The font-size: 0; and line-height: 0; remove unwanted default browser styling for inline elements. If you use gap, images, or other elements, you may not need these adjustments.

Always refer to MDN when you need more details. This was the tricky part!

Now, let's create a smooth transition effect on each side of the carousel using the :before and :after pseudo-classes.

.container:before,
.container:after {
  position: absolute;
  top: 0;
  width: 20px;
  height: 100%;
  content: "";
  z-index: 2;
}

.container:before {
  left: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
}

.container:after {
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
}

The :before and :after pseudo-elements create two "divs" on each side. We use position: absolute; inside the .container, which has position: relative;. The width will depend on your design needs—most cases will require a wider gradient. Don't forget the content: ""; property; otherwise, the pseudo-elements won't appear.

And there you have it!

(Yes, the animation might be too fast. Adjust the animation duration to fit your needs. ;) )

Check out my example on CodePen:

DEV Community: Daniel Jiménez