Obsolated tags

Distingushing the obsolated tags and new tags.

.obsolete {
  color: #888;
  opacity: 0.5;
}

Furthermore, we will add a bubble on the right side of the list item to indicate it is either new or obsolete tags.

We can make use of the .ui-li-count class to show bubble on the right side of list item.

In the following code snippet, which sits inside the toListItem method, we check if the tag needs an obsolete or html5 bubble.

// Checking if need the `obsolete` bubble
var obsolete = '';
var obsoleteClass='';
if (!this.html5)
{
  obsolete = "<p class='ui-li-count'>obsolete</p>";
  obsoleteClass = 'obsolete';
}

// Checking if need the `html5` bubble
var newTag = '';
if (!this.html4 && this.html5) {
  newTag = "<p class='ui-li-count'>html5</p>";
}

At last, we add the obsolete and html5 bubble and class to the HTML li tag and return it.

return "<li class='" + obsoleteClass + "'><h1>" + tag + "</h1><p> " + tag.explain + "</p>" + obsolete + newTag +"</li>"

The result:

What’s next? We’re going to take a look at “Adding links”.