How to set text's colour based on a class/words in the text?
Question
I'm continuing on making a Loot Bot simulator and I've nearly finished the Item Log! The button works and lists the items collected. Now I want it to colour the text based on whether it was Normal, Rare, Epic or Legendary. It says what type of rarity it is at the start of it. Any easy ways?
Also I want it to show the amount of Legendaries, Epics, Rares and Normals they have. It should be in the image below as well.
The blue bit circled is what I want changing:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Home |OWLBS</title>
<link rel="icon" type="image/png" href="favicon.png">
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/animate.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type=text/css>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:400,600,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/chance.js"></script>
<script type="text/javascript" src="js/loot.js"></script>
<script type="text/javascript" src="js/spec-loot.js"></script>
<script type="text/javascript" src="js/engine.js"></script>
<body>
<header>
<nav>
<div class="grid">
<div class="grid__item large--one-third logo">
<h1>
<a href="index.html" class="logo"><span class="loot">OW</span><span class="junkie">LBS</span></a>
<span class="version">This is not made by me, I edited another file!</span>
</h1>
</div>
<div class="grid__item large--two-thirds medium-down--hide nav">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="changelog.html">Changelog</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="wrapper">
<div class="grid">
<div class="grid__item item-section">
<img id="box" src="images/loot-box.png" alt="Loot Box">
<ul id="crate"></ul>
</div>
</div>
</div>
<div class="small-wrapper">
<div class="grid">
<div class="grid__item center">
<a class="btn yellow" onclick="openBox()" onmouseover="shakeBox()">OPEN LOOT BOX</a>
<a class="btn blue btn-toggle" onclick="itemLog(this)" id="plus" href="#">Item Log <i id="bt" aria-hidden="true"></i></a>
<div class="grid__item center">
<ul id="itemlog" style="display: none;" class="in-use"></ul>
</div>
<div class="grid__item center stats">
<div class="grid center">
<div class="grid__item one-quarter small--one-whole">
<p>Normal: <span id="white-stat">0</span></p>
</div>
<div class="grid__item one-quarter small--one-whole">
<p>Rare: <span id="blue-stat">0</span></p>
</div>
<div class="grid__item one-quarter small--one-whole">
<p>Epic: <span id="purple-stat">0</span></p>
</div>
<div class="grid__item one-quarter small--one-whole">
<p>Legendary: <span id="orange-stat">0</span></p>
</div>
</div>
</div>
</div>
<div class="grid__item center">
<div class="note"> Only for overwatch fans!</div>
</div>
</div>
</div>
</body>
</html>
JS(engine):
var crate
var openSound = new Audio('open-box.ogg');
var results = [];
var isRunning = false;
$.fn.extend({
animateCss: function (animationName) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$(this).addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
});
}
});
function itemLog(btn) {
var hide = document.getElementById("itemlog")
if (btn.id.match("plus")) {
btn.id = "minus";
hide.style.display = "block";
}
else {
btn.id = "plus";
hide.style.display = "none";
}
}
function openBox(){
if(isRunning == false){
//Reset Crate
results = [];
setTimeout(delay,1750);
setTimeout(hideBox,750);
setTimeout(deleteCards,1050);
openSound.play();
$('#box').animateCss('bounceOutUp');
$('#item0').animateCss('bounceOutUp');
$('#item1').animateCss('bounceOutUp');
$('#item2').animateCss('bounceOutUp');
$('#item3').animateCss('bounceOutUp');
isRunning = true;
}
}
function deleteCards(){
$( "#item0" ).remove();
$( "#item1" ).remove();
$( "#item2" ).remove();
$( "#item3" ).remove();
}
function hideBox(){
$( "#box" ).remove();
}
function delay(){
setTimeout(setBox,250);
}
function setBox(){
for(i = 0; i < 3; i++){
//Randomize Loot
crate = chance.weighted(loot, weights);
results.push(crate);
console.log(crate);
}
cratespec = chance.weighted(specloot, specweights);
results.push(cratespec);
endresults = chance.shuffle(results);
displayBox();
}
function displayBox(){
//Add to list
for(i = 0; i < endresults.length; i++){
var ul = document.getElementById("crate");
var li = document.createElement("li");
var span = document.createElement("span");
var node = document.createElement("LI");
span.appendChild(document.createTextNode(endresults[i]));
li.setAttribute("id", "item" + i);
ul.appendChild(li);
li.appendChild(span);
//Check Quality and Strip
var str = $("#item" + i).text();
console.log(str);
var textnode = document.createTextNode(str);
node.appendChild(textnode)
document.getElementById("itemlog").appendChild(node);
if(endresults[i].indexOf("Normal") !=-1){
$("#item" + i).addClass("normal animated bounceInDown");
$("#item" + i ).find('span').text(str.substring(7));
}
if (endresults[i].indexOf("Rare") !=-1){
$("#item" + i).addClass("rare animated bounceInDown");
$("#item" + i).find('span').text(str.substring(5));
}
if(endresults[i].indexOf("Epic") !=-1){
$("#item" + i).addClass("epic animated bounceInDown");
$("#item" + i).find('span').text(str.substring(5));
}
if(endresults[i].indexOf("Lgnd") !=-1){
$("#item" + i).addClass("legendary animated bounceInDown");
$("#item" + i).find('span').text(str.substring(5));
}
//Check Hero
//Generic
if(endresults[i].indexOf("Spray") || endresults[i].indexOf("Coins") !=-1){
$("#item" + i).addClass("generic");
}
//orisa
if(endresults[i].indexOf("Orisa") !=-1){
$("#item" + i).addClass("orisa");
}
//sombra
if(endresults[i].indexOf("Sombra") !=-1){
$("#item" + i).addClass("sombra");
}
//ana
if(endresults[i].indexOf("Ana") !=-1){
$("#item" + i).addClass("ana");
}
//bastion
if(endresults[i].indexOf("Bastion") !=-1){
$("#item" + i).addClass("bastion");
}
//dva
if(endresults[i].indexOf("D.Va") !=-1){
$("#item" + i).addClass("dva");
}
//genji
if(endresults[i].indexOf("Genji") !=-1){
$("#item" + i).addClass("genji");
}
//hanzo
if(endresults[i].indexOf("Hanzo") !=-1){
$("#item" + i).addClass("hanzo");
}
//junkrat
if(endresults[i].indexOf("Junkrat") !=-1){
$("#item" + i).addClass("junkrat");
}
//lucio
if(endresults[i].indexOf("Lucio") !=-1){
$("#item" + i).addClass("lucio");
}
//McCree
if(endresults[i].indexOf("McCree") !=-1){
$("#item" + i).addClass("mccree");
}
//Reaper
if(endresults[i].indexOf("Reaper") !=-1){
$("#item" + i).addClass("reaper");
}
//Mei
if(endresults[i].indexOf("Mei") !=-1){
$("#item" + i).addClass("mei");
}
//Mercy
if(endresults[i].indexOf("Mercy") !=-1){
$("#item" + i).addClass("mercy");
}
//Pharah
if(endresults[i].indexOf("Pharah") !=-1){
$("#item" + i).addClass("pharah");
}
//Reinhardt
if(endresults[i].indexOf("Reinhardt") !=-1){
$("#item" + i).addClass("reinhardt");
}
//Roadhog
if(endresults[i].indexOf("Roadhog") !=-1){
$("#item" + i).addClass("roadhog");
}
//Solider76
if(endresults[i].indexOf("Soldier: 76") !=-1){
$("#item" + i).addClass("soldier");
}
//Symmetra
if(endresults[i].indexOf("Symmetra") !=-1){
$("#item" + i).addClass("symmetra");
}
//Torbjorn
if(endresults[i].indexOf("Torbjorn") !=-1){
$("#item" + i).addClass("torbjorn");
}
//Tracer
if(endresults[i].indexOf("Tracer") !=-1){
$("#item" + i).addClass("tracer");
}
//Widowmaker
if(endresults[i].indexOf("Widowmaker") !=-1){
$("#item" + i).addClass("widowmaker");
}
//Winston
if(endresults[i].indexOf("Winston") !=-1){
$("#item" + i).addClass("winston");
}
//Zarya
if(endresults[i].indexOf("Zarya") !=-1){
$("#item" + i).addClass("zarya");
}
//Zenyatta
if(endresults[i].indexOf("Zenyatta") !=-1){
$("#item" + i).addClass("zenyatta");
}
}
isRunning = false;
}
function shakeBox(){
$("#box").addClass("shakebox");
setTimeout(removeShake,820);
}
function removeShake(){
$("#box").removeClass("shakebox");
setTimeout(shakeBox,1820);
}
If you need any more files just ask! I haven't shown animate.css, chance.js, loot.js or spec-loot.js
1 answers
solution1
0 ACCPTED 2017-05-12 16:24:18
Looks like you're already adding some classes to your list items, mainly normal , rare , epic , and legendary . Why not add some corresponding CSS rules? For example:
.normal {
color: gray;
}
.rare {
color: green;
}
.epic {
color: purple;
}
.legendary {
color: gold;
}
EDIT You should try to add the same classes to your textnodes as you are to your cards, then use those classes for the appropriate CSS. For example:
//Check Quality and Strip
var str = $("#item" + i).text();
console.log(str);
var textnode = document.createTextNode(str);
document.getElementById("itemlog").appendChild(node);
if(endresults[i].indexOf("Normal") !=-1){
$("#item" + i).addClass("normal animated bounceInDown");
$("#item" + i ).find('span').text(str.substring(7));
// Add 'normal' class to textnode
textnode.className = 'normal';
}
if (endresults[i].indexOf("Rare") !=-1){
$("#item" + i).addClass("rare animated bounceInDown");
$("#item" + i).find('span').text(str.substring(5));
// etc.
textnode.className = 'rare';
}
if(endresults[i].indexOf("Epic") !=-1){
$("#item" + i).addClass("epic animated bounceInDown");
$("#item" + i).find('span').text(str.substring(5));
textnode.className = 'epic';
}
if(endresults[i].indexOf("Lgnd") !=-1){
$("#item" + i).addClass("legendary animated bounceInDown");
$("#item" + i).find('span').text(str.substring(5));
textnode.className = 'legendary';
}
node.appendChild(textnode);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Set text colour based on input type 'select'
How to change text colour based on conditions?
How to dynamically change text colour based on dynamically changing background colour
Change text colour based on background
Highcharts set Series Text Colour
d3-how to change colour of text based on value (if else)
How to add conditions ( colour, text) to button based on data from Firebase
How to have a button change colour based on text file?
How to dynamically set pie piece text colour on a C3 chart
How to set the colour of a text in a textarea using html input tag
Related Tags