How do I select text contents parent to add class list to it?

I am using this method to change the text content based on what the api value returned is.

airQuality(aq) {
    if (aq < 3) {
      return "Good";
    }
    if (aq < 5) {
      return "Unhealthy";
    } else {
      return "Hazardous";
    }
  }

airQuality(aq) {
    if (aq < 3) {
      return "Good";
    }
    if (aq < 5) {
      return "Unhealthy";
    } else {
      return "Hazardous";
    }
  }

It is being used in this mark up

<div class="hourly__hour__air__quality">
            <h4 class="mb-xsm">Air Quality</h4>
            <p class="air__quality">${this._airQuality(hour.hourAirQuality)}</p>

<div class="hourly__hour__air__quality">
            <h4 class="mb-xsm">Air Quality</h4>
            <p class="air__quality">${this._airQuality(hour.hourAirQuality)}</p>

I am trying to add a class list that will change its text color based on either what is returned or its new text content. In the airQuality method is it possible to select the owner of the text content to use classList.add() to it? https://github.com/bsupinski/weather_app

GitHub

GitHub - bsupinski/weather_app

Contribute to bsupinski/weather_app development by creating an account on GitHub.

7 Replies

Joao•3y ago

I assume this markup of yours is created through JavaScript? If so, why not follow the same method of using string interpolation?

<p class="air__quality ${some_class_here}">
  ${this._airQuality(hour.hourAirQuality)}
</p>

<p class="air__quality ${some_class_here}">
  ${this._airQuality(hour.hourAirQuality)}
</p>

ErrtuOP•3y ago

and use an inline style?

Joao•3y ago

Sure, why not?

ErrtuOP•3y ago

oh wait i could just use the same method and have it add its returned value as a class name is it a big deal to have a class name starting with a capitalized letter?

Joao•3y ago

I don't think so, but you can also run toLowerCase on it first.

ErrtuOP•3y ago

Thank you, I definitely over thought that problem.

Joao•3y ago

Nice 👍

Gaming

Programming

How do I select text contents parent to add class list to it?