function updateSelect(e) {
    const { target } = e;

    const value = target.value;

    const cadenceRow = inputCadence.closest(".form__row");
    const elevationRow = inputElevation.closest(".form__row");

    // Remove the hidden class from both rows first
    cadenceRow.classList.remove("form__row--hidden");
    elevationRow.classList.remove("form__row--hidden");

    const selected = {
      cycling: elevationRow,
      running: cadenceRow,
    };

    selected[value].classList.add("form__row--hidden");
  }

 function adjustGrid(number) {
        if (parentGrid) {
            parentGrid.dataset.grid = `courses-${number}`;
            parentGrid.style.setProperty("--compare-col-count", number);

            const gridOptions = {
                1: () => cssColWidthVariable("minmax(205px, 230px)"),
                2: () => cssColWidthVariable("minmax(205px, 249px)"),
                3: () => cssColWidthVariable("minmax(205px, 1fr)"),
                4: () => cssColWidthVariable("minmax(205px, 1fr)"),
            };

            number = gridOptions[number] || "205px";
        }
    }


 function cssColWidthVariable(value) {
        if (parentGrid) {
            parentGrid.style.setProperty("--compare-col-width", value);
        }
    }


adjustGrid(JSON.parse(localStorage.getItem("courses") || "[]").length);



// the css
 &__courses {
      display: grid;
      grid-template-columns: clamp(120px, 39vw, 180px) repeat(var(--compare-col-count, 4), var(--compare-col-width, 205px));
      grid-template-rows: repeat(2, 1fr) repeat(6, 90px) repeat(1, 1fr);
      z-index: 1;
      column-gap: 1.6rem;
 }

#Add the new column which gives a unique number to each of these labels 

df['label_num'] = df['label'].map({
    'Household' : 0, 
    'Books': 1, 
    'Electronics': 2, 
    'Clothing & Accessories': 3
})

#checking the results 
df.head(5)