departure-board icon indicating copy to clipboard operation
departure-board copied to clipboard

text color change based on content

Open vincenzodesanctis opened this issue 7 years ago • 2 comments

Congratulation! It's very cool. I have a question: is there a easy way to chance text color based on text?

Example:

if text_match = 'world' than color yellow result:

first row: "this is a test"---> color white 
second row: 'hello world!'  ----> color yellow

I think I should use this._element.appendChild on DepartureBoard.Letter, but I tried without sucessful.

thank you

vincenzodesanctis avatar Apr 11 '17 12:04 vincenzodesanctis

You can either achieve this with CSS:

.row:nth-child(2) .letter {
	color: yellow;
}

...or with JavaScript. In the case of the demo, that would be:

// After the line: var board = new DepartureBoard(...);
board._element.querySelector('.row:nth-child(2)').style.color = 'yellow';

paulcuth avatar Apr 11 '17 13:04 paulcuth

Thank you for your quick answer! Your great suggestion works well, but I'm looking for something like this:

board._element.querySelector(".row").should.have.text('world').style.color = 'yellow';

I mean, color yellow if the class .row contains the text 'world'

vincenzodesanctis avatar Apr 11 '17 15:04 vincenzodesanctis