JSFiddle - React, Tailwind, and code Playground

by Christopher McCulloh

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <img width="30" id="mm" src=""/>
    
    <p style="margin-top: 100px; color: #aaa">Click the box below, "a" for left, "d" for right:</p>
    <p><input id="directions" type="text"></p>
</body>
</html>

JavaScript

function onLeft(){
    var theleft = jQuery("#mm").offset().left;
    theleft -= 5;
    jQuery("#mm").offset({ left: theleft });
}

function onRight(){
    var left = jQuery("#mm").offset().left;
    left += 10;
    jQuery("#mm").offset({ left: left });
}

var imgs=["http://static.gamesradar.com/images/mb/GamesRadar/us/Games/M/Mega%20Man%209/Everything%20Else/Raw/rock1--article_image.jpg",
"http://remyvanruiten.files.wordpress.com/2011/10/mega-man9-copy-432x4501-1.jpg",
"http://inadawords.com/wp-content/uploads/2008/06/mega-man.png"];

var curImg = 2;

function cycle(){
   curImg++;
    if(curImg > 2){
        curImg=0;
    }
    jQuery("#mm").attr("src",imgs[curImg]);
    console.log('cycle ran, img set to: ' + curImg);
}

jQuery("#directions").keypress(function(event) {
    if(event.which == 97){//a
       onLeft();         
    }else if(event.which == 100){//d
        onRight();
    }
    cycle();
});

cycle();