A JS snippet to be run in Chrome's console to get a printable view of a week's menu

8fit_printable_weekmenu.js

(function(){
    // Instructions:
    // --------------------------------------------------------------
    // 1. Browse to the first day of the week you want to print
    //    (i.e. https://8fit.com/a/#/meals/date/2016-05-02)
    // 2. Run this script in the console
    // 3. Zoom-in/out as needed 
    // 4. Take screenshot and print
    // ==============================================================
    //
    // Settings
    var clickDelay = 500;       // Time delay between simulated clicks
    var zoom = 0.25;            // Final, global zoom
    var blockWidth = "500px";   // Standarised column width
    var maxDays = 7;            // # of days to grab

    // Internal stuff
    var currentDay = 0;         // Iteration counter
    var blocks = [];            // Results holder

    // Main function, grabs screen content and finally
    // builds printable UI
    var grabNext = function(){
        console.log( "will grab next block (" + (currentDay+1) + " of " + maxDays + ")")
        // Get the current day html block and add it to our list
        var block = $(".layout-content-centered-narrow").html();
        blocks.push( block );

        // Let's go for the next one
        currentDay++;

        // Are there still days to grab?
        if( currentDay < maxDays ){
            // If so, simulate user click on next day and wait a bit for the block to load
            $(".day-navigation__day[data-index=1]").click();
            setTimeout( function(){
                grabNext();
            }, clickDelay );
        }
        else
        {
            // If no days left to grab, let's build or UI...
            // Clear screen, make some room here ok?
            $(".js-app-container").html("");

            // Add all previously grabbed blocks
            console.log( "Finished grabbing blocks, let's add them!");
            for (var i = 0; i < blocks.length; i++)
            {
                // Make them align next to each other, equally sized
                var block = blocks[i];
                var newElement = $( block );
                newElement.css( "float", "left" );
                newElement.css( "width", blockWidth );

                // Append it to the top level
                $(".js-app-container").append( newElement );
                console.log( "adding element "+i );

            }
            // Make room for all of them
            //$(".layout-content-centered-narrow").css("max-width", "100%");
            $("body").css("zoom", 0.5);

            // Remove unnecessary UI elements
            $(".meal-card__actions").remove();

            console.log( "All right, done!" );

        }
    }
    // OK, let's get the party started!
    grabNext();
})();