Bubble Sort Algorithm Simple Visualization Via Cards

So today we're going to cover up how we can visualize the each steps of the algorithms we use .
Today I'm going to cover bubble sort algorithm visualizations via html boxes or you can say cards
each card is going to change it's values from the one as per the algorithm condition, so before doing anything let's understand about the bubble sort algorithm and the required things we need for this task.

Definition of Bubble Sort?
Bubble sort is one of the fundamental forms of sorting in programming. Bubble sort algorithms move through a sequence of data (typically integers) and rearrange them into ascending or descending order one number at a time. To do this, the algorithm compares number X to the adjacent number Y. If X is higher than Y, the two are swapped and the algorithm starts over.

What Does Bubble Sort Mean?

The name bubble sort comes from the fact that smaller or larger elements "bubble" to the top of a dataset. In the previous example of [3, 1, 4, 2], the 3 and 4 are bubbling up the dataset to find their proper positions.

This algorithm is alternatively called the sinking sort for the opposite reason; some of the elements are sinking to the bottom of the dataset. In our example, the 1 and the 2 are sinking elements.

So now we knows about bubble sort algorithm then let's checkout code one by one.
First we needed html structure as we have in video.
So let's start creating it, well I'm not so much good at frontend so the structure code can be messy,
but you guys can create your own structure and the only thing you need is just javascript code and you'll gonna get it at the end of the article.