Class CardBox

js/card.js:4–48

* Class that represents a box inside a card.

 * Class that represents a box inside a card.
 */
class CardBox {
    
    // Define properties related to the DOM elements and their styles.
    DOM = {
        el: null,                 // The main container of the box
        number: null,             // The number inside the box
        numberChars: null,        // Individual characters of the number (after using Splitting.js)
        tags: null,               // The tags associated with this box
        category: null,           // The category of the box
        categoryChars: null,      // Individual characters of the category (after using Splitting.js)
    };

    /**
     * Constructor: Initializes the properties with the actual DOM elements.
     * @param {HTMLElement} DOM_el - The main container of the box.
     */
    constructor(DOM_el) {
        // Associate the provided element with the main container
        this.DOM.el = DOM_el;
        // Fetch various child elements
        this.DOM.number = this.DOM.el.querySelector('.card__box-number');
        this.DOM.tags = this.DOM.el.querySelector('.card__box-tags');
        this.DOM.category = this.DOM.el.querySelector('.card__box-category');

        // Prepare the number and category elements for splitting using Splitting.js
        if ( this.DOM.number ) {
            this.DOM.number.dataset.splitting = '';
        }
        if ( this.DOM.category ) {
            this.DOM.category.dataset.splitting = '';
        }

        // Use Splitting.js to split the text content into individual characters for animation/effects.
        Splitting();

        // Store references to the individual characters after the split.
        if (this.DOM.number) {
            this.DOM.numberChars = this.DOM.number.querySelectorAll('.char');
        }
        if (this.DOM.category) {
            this.DOM.categoryChars = this.DOM.category.querySelectorAll('.char');
        }
    }
    
}

/**
 * Class representing Card1.