LeetCode Question Counter | Nathaniel's Blog

Nowadays almost everybody who’s looking for a job in the IT industry relies on LeetCode to prepare for technical interviews.

If you are an intensive LeetCode user, you might have created some personal question lists. Or, at least you have used the filters (e.g. “difficulty=medium”, “tag=array”) to find the questions you’re interested in.

When looking at the questions in your custom list, have you ever been wondering how many are there, or how many out of them have you completed?

I did, but I couldn’t find these numbers.

I’m not sure whether the LeetCode team did this on purpose, but I think it’d be so nice if they have provided the counting feature by default, or at least as a paid option. However, the reality is they don’t, and we gotta do something by ourselves.

In order to make the list header display the number of questions, both completed and total, we first need to install a browser plugin/extension that allows us to inject and run our custom JavaScript code (e.g. Custom JavaScript for websites for Chrome).

Then, set up a rule to run the following code whenever a webpage starting with “leetcode.com” (or define your own regex) is completely loaded:

$(function() {
    let titleDOM = $('th.reactable-th-question_title').children('strong');
    let statusDOM = $('th.reactable-th-status');
    let tableDOM = $('tbody.reactable-data');
    let filtersDOM = $('div.filter-tag-bar');

    let refresh = function(){
        let count = $('tbody.reactable-data').children().length;
        let acCount = $('tbody.reactable-data').find('td[value="ac"]').length;
        titleDOM.text('Title' + ' (Total=' + count + ')');
        statusDOM.text(acCount);
    }

    refresh();

    let config = { attributes: true, childList: true, subtree: true };

    let observer = new MutationObserver(refresh);
    observer.observe(filtersDOM[0], config); 
});

Finally, simply enable the plugin and refresh the webpage.