Method constructor

js/card.js:20–46

* Constructor: Initializes the properties with the actual DOM elements. * @param {HTMLElement} DOM_el - The main container of the box.

(DOM_el)

     * @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');
        }
    }
    
}