Time Tracking Dashboard w/ Javascript Functions

What are you most proud of, and what would you do differently next time?

I learned to take advantage of mutation of DOM property/attributes stored in a map/array.

Store the newly created nodes in a map/array. Then when we make adjustments in the nodes within the map/array, it also applies the adjustments in the DOM!

This works because when we store an already defined object (such as {}, a node, etc.) in a variable, array, or map, the object isn't duplicated. Instead, what gets stored is a reference — essentially a pointer to the memory address where the actual object resides.

Think of the object as a box containing data. When you assign this object to another variable, you're not creating a new box. You're just handing out another label or tag that points to the same box. Both variables now point to the same box, so any changes made through one label are reflected when accessed through the other.

import {CreateDOM} from "./classDOM.js";

export class TimeTracking {
   #activityDOMList = new Map();
   #previousHoursText = {
      "daily": "Yesterday",
      "weekly": "Last Week",
      "monthly": "Last Month",
   }
   #jsonData = null;

   constructor(url) {
      ...
   }

   async getJSON() {
      ...
      this.#jsonData = data;
   }

   createActivityCards(mode = "daily") {
      ...

      this.getJSON().then(res => {
         for(const {title, timeframes} of res) {
            const activityArticle = new CreateDOM(...);
            ...

            activityArticle.setParent(...)
                           .createChild(...)

            //Stores the node to an a map variable
            this.#activityDOMList.set(title, activityArticle);
         }
      });
   }

   changeFilterAll(e) {
      ...
      this.#jsonData.then(res => {
         ...
         const jsonMap = new Map(res.map(mapResult => [mapResult.title, mapResult.timeframes]));

         //By editing the value in this.#activityDOMList where the nodes of the activity cards are stored, it is also mutates the ones in the DOM.

         //Looping throught the this.#activityDOMList map
         for (const [key, objDOM] of this.#activityDOMList) {
            const currentElement = objDOM.node.querySelector('.tracking-card__activity-current');
            const previousElement = objDOM.node.querySelector('.tracking-card__activity-previous');

            //Modifying the node values from the array, which will then change the value in the DOM.
            currentElement.textContent = `${jsonMap.get(key)[timeframeFilter].current}hrs`;
            previousElement.textContent = `${this.#previousHoursText[timeframeFilter]} - ${jsonMap.get(key)[timeframeFilter].previous}hrs`;
         }
      })
   }
}

What challenges did you encounter, and how did you overcome them?

For the activity card background color. There was artifacts color at the bottom left and right of the card. I solved it by using linear gradient to apply the background color at the upper portion of the card only.

.bg-orange {
   background: linear-gradient(0deg, transparent 50%, var(--orange) 50%);
}

What specific areas of your project would you like help with?

Anything, I'm open for improvements!