Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Ian Svoboda
Ian Svoboda
16,639 Points

Add a "Hide Completed Courses" checkbox to the treehouse library page via userscript

I created a Tampermonkey userscript that will add a "Hide Completed Courses" checkbox to the library page.

Please check it out and feel free to use. Note: this uses TamperMoneky (www.tampermonkey.net).

// ==UserScript==
// @name         Treehouse Hide Completed Courses
// @namespace    http://teamtreehouse.com/
// @include      http://teamtreehouse.com/
// @version      0.1
// @description  Adds a "hide completed courses" option on the library page within teamtreehouse.com
// @author       Ian Svoboda
// @match        http://teamtreehouse.com/library*
// @grant        none
// ==/UserScript==

(function toggle_complete() {
    var style_tag = document.createElement('style');
    var head = document.head || document.getElementsByTagName('head')[0];
    var the_css = '#show_complete label {'+
                   'display: inline-block;'+
                   'padding: 0 0 0 0;'+
                   'position: relative;'+
                   'z-index: 999;'+
                   'vertical-align: bottom;'+
                   'margin-right: 10px;'+
                   'top: 2px;'+
                '}'+
                '#show_complete .custom-filter-label {'+
                   'display: inline-block;'+
                   'position: relative;'+
                   'z-index: 99;'+
                   'font-weight: 500;'+
                   'color: #8d9aa5'+
                '}'+
                '.card-list.hide-completed .completed {display: none;}';

    var the_filter_li = document.createElement('li');
        the_filter_li.id = "show_complete";
        the_filter_li.className = "dropdown-parent filter-container";

    var the_filter = the_filter_li;
        the_filter.innerHTML = '<label for="complete_input"><input id="complete_input" name="complete_input" type="checkbox" ></label><span class="custom-filter-label">Hide Completed Items</span>';

    style_tag.appendChild( document.createTextNode(the_css) );
    head.appendChild(style_tag);

    var control_ul = document.querySelector('.control-page-items');
        control_ul.insertBefore(the_filter, control_ul.firstChild );

    var filter_checkbox = document.getElementById('complete_input');
        filter_checkbox.addEventListener('change', function() {
            if(filter_checkbox.checked) {
                document.querySelector('.card-list').classList.add('hide-completed');
            } else {
                document.querySelector('.card-list').classList.remove('hide-completed');
            }

        });
})()