using maps = toggling class on select

/* html*/ 
 <div class="form__row">
            <label class="form__label">Cadence</label>
            <input
              class="form__input form__input--cadence"
              placeholder="step/min"
            />
          </div>
          <div class="form__row form__row--hidden">
            <label class="form__label">Elev Gain</label>
            <input
              class="form__input form__input--elevation"
              placeholder="meters"
            />
          </div>




/* Map JS*/
inputType.addEventListener("change", (e) => updateSelect(e));

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");
  }



/* with a reusable function */


const inputType = document.querySelector('.form__input--type');

inputType.addEventListener("change", function (e) {
  const value = e.target.value;

  // run the toggleFieldVisibility here
  toggleFieldVisibility(value, {
    running: '.form__input--elevation',
    cycling: '.form__input--cadence',
  });
});

function toggleFieldVisibility(selectedType, hiddenFieldMap) {
  // First remove hidden class from all mapped fields
  Object.values(hiddenFieldMap).forEach(selector => {
    const row = document.querySelector(selector)?.closest('.form__row');
    row?.classList.remove('form__row--hidden');
  });

  // Then hide the one mapped to the selected type
  const selectorToHide = hiddenFieldMap[selectedType];
  const rowToHide = document.querySelector(selectorToHide)?.closest('.form__row');
  rowToHide?.classList.add('form__row--hidden');
}

class Solution {
  public:
    map<int,int> deno{
        {5,0},
        {10,0},
        {20,0}
    };
    bool canCreateDeno(int x){
       for(auto i = deno.rbegin(); i != deno.rend();i++){
           if(i->second > 0 ){
               int times = (x / i->first);
               times = min(times, i->second);
               x -= times * i->first;
               i->second -= times;
           }
       } 
       return x == 0;
    }
    bool lemonadeChange(int N, vector<int> &bills) {
        // code here
        for(int i = 0 ; i < N; i++){
            int x = bills[i] - 5;
            if(x == 0){
                deno[bills[i]]++;
            }
            else{
                bool f = canCreateDeno(x);
                if(!f)
                    return false;
                deno[bills[i]]++;
            }
        }
        return true;
    }
};

// * color pallete creation
$colors: (
  "primary": $primary,
  "secondary": $secondary,
  "error": $error,
  "info": $info,
  "blue": #1919e6,
  "red": #e61919,
  "yellow": #e6e619,
  "green": #19e635,
  "orange": #ffa600,
  "purple": #9900ff,
  "gray": #808080,
  "black": black,
  "white": white,
);


// use this to get the data in the terminal
@debug map-get($colors);

//terminal prints
─> sass:map
1 │ @function get($map, $key, $keys...) {
  
  
 
 // Test a color with 
 @debug map-get($colors, "purple");
 // terminal prints: DEBUG: #9900ff
  
  
  // evaluation to true or false
	@debug map-has-key($colors, "firebrick"); //DEBUG: false

$colors: (
  "primary": $primary,
  "secondary": $secondary,
  "error": $error,
  "info": $info,
  "blue": #1919e6,
  "red": #e61919,
  "yellow": #e6e619,
  "green": #19e635,
  "orange": #ffa600,
  "purple": #9900ff,
  "gray": #808080,
  "black": black,
  "white": white,
);



.card {
  display: block;
  padding: $base-padding;
  border: $base-border-thickness solid $light-grey;
  border-radius: $base-border-radius;
  box-shadow: $base-box-shadow;

  // Loop over all keys in the colors map and use them for background color variations
  @each $key, $val in $colors {
    &--bgcolor-#{$key} {
      background-color: $val;

        // Change text to white if the color is purple
    	// change the text to yellow if the color is red
    	// else leave it at black
      @if $key == "purple" {
        .card__body p {
          color: map-get($colors, "white" )
        }
      } @else if $key == "red"{
        .card__body p {
          color: map-get($colors, "yellow")
        }
      }@else {
        .card__body p {
          color: #000;
        }
      }
    }
  }

  &__title {
    h3 {
      font-size: $font-size-lg;
      padding-bottom: $base-padding;
      font-weight: bold;
    }
  }

  &__body {
    font-size: $base-font-size;

    a {
      text-decoration: underline;
    }
  }
}

$colors: (
  purple: #6a0dad,
  blue: #3498db,
  green: #2ecc71
);

@each $key, $val in $colors {
  @debug 'Key: #{$key}, Value: #{$val}';
}


//preview in the terminal