Keyword Tags and Highlighting working

To quickly jump to the end of todays achievements, I made

  • individual tags for the top keywords, with the tags displaying in a side column.
  • the ability to highlight each keyword individually, or highlight all the keywords using a checkbox tick.

Here is a screenshot of what it looks like now:


Here is where today started, and the processes I went through:

Now I need to get the keywords to highlight/unhighlight using a checkbox.

Code looks like so, with the function being triggered by the check/uncheck of the checkbox:

function highlightText(checkboxElement){
else{ markInstance.unmark();}}

Now want to get the keywords to appear ‘separately’, so the user will have the ability to check/uncheck each of the words individually.

So the keywords are now appearing as separate tags, and the user has the ability highlight/unhighlight individual keywords by clicking on the tags.

Created the individual keyword tags using vanilla javascript like so:

var key = keywords[i];
keywordButtons[i] = document.createElement(“button”)
keywordButtons[i].className=”btn btn-default btn-xs keyword-” + keywords[i];
keywordButtons[i].id = ‘keyword-‘ + keywords[i];
keywordButtons[i].value = false;
keywordButtons[i].onclick = function(){highlightKeyword(this);};

The keywords can be (un)highlighted by clicking on the tags, which calls the following function:

function highlightKeyword(keywordButtonElement){
var keyword =;
var options = {“className”:”highlighted-” + keyword};
if(keywordButtonElement.value == ‘false’){
keywordButtonElement.value = true; = ‘yellow’;
markInstance.mark(keyword, options);
keywordButtonElement.value = false; = ‘white’;
var options = {“className”:”highlighted-” + keyword};

Also the checkbox function has been updated so that it gives each of the highlighted keywords a class name, which allows us to later access each keyword individually. The checkbox function also now updates the color and values of the keyword tags.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s