JSFiddle - React, Tailwind, and code Playground

Interactive Treehouse Ad

by Jennifer Perrin

HTML

<div class="main-content">
    <div class="ad">

    <h3>Learning Sponsor</h3>

    <div class="canvas" id="canvas">
        <a id="treehouse-ad" href="" target="_blank">Team Treehouse!</a>
        <img src="http://css-tricks.com/wp-content/themes/CSS-Tricks-10/images/mike-standard.png" alt="Mike">
    </div>

    <div id="code-area-wrap">
        <h3>jQuery <span id="step-counter">1/5</span></h3>
        <pre class="code-area" id="code-area">
        var treehouse =
        $('#treehouse-ad')
        .addClass('button');
        </pre>
    </div>

    <div class="run-code-wrap">
        <a href="#" class="button" id="run-code">Run Code</a>
    </div>

    </div>
</div>

CSS

html { }

.main-content {
    width: 90%;
    margin: 0 auto;
    padding: 20px;
    overflow: hidden;
}

.ad {
    background: white;
    box-shadow: 0 0 5px rgba(black, 0.2);
    padding: 10px; 
    width: 350px;
}

.ad h3 {
    color: white;
    background: orange;
    margin: 0;
    padding: 2px 5px;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 11px;
    letter-spacing: 1px;
    position: relative;
}

pre {
    background: #222;
    margin: 0;
    color: white;
    font: 11px/1.6 Monaco, MonoSpace;
    padding: 10px;
    min-height: 80px;
}

.canvas {
    border: 1px dotted #ccc;
    text-align: center;
    padding: 80px 20px;
    margin: 0 0 10px 0;
    overflow: hidden;
    position: relative;
    @include transition(all 0.2s ease);
}

.all-done { background: #b7d181; }

img {
    position: absolute;
    bottom: -10px;
    left: 100%;
    width: 150px;
    @include transition(all 0.2s ease);
}

#tagline {
    position: relative;
    left: -40px;
    @include transition(all 0.2s ease);
    z-index: 1;
}

#code-area-wrap { position: relative; }

.clone {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
}

#step-counter {
    position: absolute;
    right: 5px;
    top: 3px;
    color: black;
}

.run-code-wrap {
    text-align: center;
    margin: 20px 0 10px;
}

.button {
    border: 0;
    border-radius: 0;
    outline: 0;
    background: #4e68c7;
    box-shadow:  1px 0px 1px;
    color: white;
    white-space: nowrap;
    padding: 9px 16px;
    position: relative;
    top: -5px;
    text-decoration: none;
}

.button:hover, .button:focus {
    color: white;
    background: #3d57b4;
}

.button:active {
    box-shadow:  1px 0px 1px
    top: -2px;  left: 3px;
}

JavaScript

var treehouse; // nasty global just for example code readability
var TreehouseAd = {

    step: 0,
    delay: 400,
    codeArea: $("#code-area"),
    counter: $("#step-counter"),

    init: function() {
        this.bindUIActions();
    },

    codeText: [
        "treehouse = \n\
        $('#treehouse-ad')\n\
        .addClass('button');",
        
        "treehouse.animate({\n\
        top: '-40px'\n\
        });",
        
        "treehouse.text(\n\
        'Learn jQuery at Treehouse!'\n\
        );",
        
        "$('<div />', {\n\
        id: 'tagline',\n\
        text: \"Hi, I'm Mike.\"\n\
        }).insertAfter(treehouse);",
        
        "$('#canvas')\n\
        .addClass('all-done');\n\n\
        console.log('Thanks!')"
        ],

    bindUIActions: function() {
        $("#run-code").on("click", function(e) {
            e.preventDefault();
            TreehouseAd.animateCode();
            TreehouseAd.runCode();
        });
    },

    animateCode: function() {
        this.codeArea.clone().addClass("clone").insertAfter(this.codeArea).animate({
            top: "-60px",
            opacity: 0
        }, TreehouseAd.delay, function() {
            $(".clone").remove();
        });
    },

    runCode: function() {
        setTimeout(function() {
            if (TreehouseAd.step < 5) {
                eval(TreehouseAd.codeText[TreehouseAd.step]);
                TreehouseAd.step++;
                TreehouseAd.counter.text((TreehouseAd.step + 1) + "/5");
                TreehouseAd.codeArea.text(TreehouseAd.codeText[TreehouseAd.step]);
            }

            if (TreehouseAd.step == 6) {
                // reset canvas
                treehouse.text("Team Treehouse!").removeClass().removeAttr("style");
                $("#tagline").remove();
                $("#canvas").removeClass("all-done");
                $("#run-code").text("Run Code");
                TreehouseAd.step = 0;
               ...