DescribeMe Module

DescribeMe Module

by Nirvanachain

HTML

<div class="container clearfix">
    <p>Please click the image to learn more about me.</p>
    <div class="floatLeft margRight">
        <img class="imgSpin js-button" src="http://i.imgur.com/ChTLUyU.png" alt="image of a refresh arrows" />
    </div>
    <!-- /floatLeft -->
    <div class="floatLeft padTop">
        I am a <span class="js-print">web developer</span>.
    </div>
    <!-- /floatLeft -->
</div>
<!-- /container -->

CSS

/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
} 
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1; /* For IE 6 and IE 7*/
}

.container {
    padding: 5%;
}

.floatLeft {
    float:left;
}
.margRight {
    margin-right: 5%;
}

.padTop {
    padding-top:10px;
}

.imgSpin {
 -webkit-transition: all ease-in 0.5s; 
 -moz-transition: all ease-in 0.5s; 
 transition: all ease-in 0.5s; 
}

.imgSpin:hover {
    cursor: pointer;
    opacity: 0.75;
    filter: alpha(opacity=75); /* IE5, IE6, IE7 Opacity */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /* IE8 opacity */

}

JavaScript

// Cache selectors
var $ele = {  
         print   : $('.js-print'),
         button : $('.js-button')
    };

var DescribeMeModule = (function($element) {
    
    // The underscore (_) denotes a private variable
    var _degree = 360;
    
    var _me = [
        {
            phrase : 'web developer',
            color  : '#B20000'
        },
        {
            phrase : 'OOCSS enthusiast',
            color  : '#1919A3'
        },
        {
            phrase : 'mobile-first, responsive design fan',
            color  : '#006B24'
        },
        {
            phrase : 'XSLT developer',
            color  : '#6B246B'        
        },
        
        {
            phrase : 'book nerd',
            color  : '#CC6699'
        },
        {
            phrase : 'huge fan of Joss Whedon',
            color   : '#002EB8'
        },
        {
            phrase : 'twin cities adventurer',
            color  : '#5C8A8A'
        }
    ];    
    
    // initialize
    var init = function() {
        bindUserActions();   
    }
    
    //bind user actions and call appropriate sub fucntion
    var bindUserActions = function() {  
        //Replace text in element .js-print if JavaScript is enabled
        loadText();
        //click event
        addClick($element.button, 'click', function() {
           rotateImg();
           changeText();
           changeColor();
        });        
    }
    
 
    var addClick = function(element, evnt, funct) {
        element.on(evnt,  funct);
    }
    
    // Write first value in the array (position: 0)
    var loadText = function() {
        console.log('Hi Nerdery.  I want to contribute to a team filled with people who are knowledgable and passionate about the web.');
        $element.print.text(_me[0].phrase);
        $element.print.css('color', _me[0].color)
    }
    
    // Change the text in the element with class js-print
    var changeText = function() {
        // index is the position in the array
        var...