CODEWITHSUNDEEP
javascriptaurelia
Adn
Adn

Reputation: 135

Change Background Color based on InnerHtml in Aurelia

I want to change the background of the div based on the InnerHtml. For example: if it is 10 or above, then the color is white. home.html

<template>
<div id="value">5</div>
</template>

home.js

export class Home{
}

Upvotes: 1

Views: 370

Answers (1)

Matthew James Davis
Matthew James Davis

Reputation: 12295

<div css="background-color: getColor(colorElement.innerText)" element.ref="colorElement">5</div>

getColor(text) {
  const num = Number(text);
  return isNaN(num) ? 'white' : `hsl(0,0,${Math.min(Math.max(num 0), 10)}0%`;
}

Upvotes: 1

Related Questions