Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="//code.jquery.com/jquery-git2.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <script type="text/html" id="tmpl">
    Running!!!
    <% var a =(total >= 0 ? 'pos' : 'neg'); %>
    <h1 class="<%- a %>">Score:<%- total %></h1>
    <h3>Moves:<%- changes.length %></h3>
    <h3>Sum of changes:<%- _.reduce(changes,function(a,v){return a+v}) %>
    <h3>Moves Left:<%- possibleMoves - changes.length  %></h3>
    <ul class="totals">
      <%
        _.each(changes,function(v,i){
          var a =(v >= 0 ? 'pos' : 'neg');
      %>
            <li class="<%- a %>"><%- v %></li>
      <%
        })
      %>
    </ul>
  </script>
  <button id="change">CLICK ME!!!</button>
  
</body>
</html>
 
button {
  border-radius:20px;
  background-color:black;
  color:white;
  font:20px arial;
  margin:10%;
  width:80%;
}
.totals li {
  font:bold 9px/1px arial;
  display:inline-block;
   padding:0;
  margin:0; 
}
.pos {
  color:#0F0;
}
.neg {
  color:#F00;
}
 
// define our function
function trackScore(change){
  if(change === "reset")
    return trackScore.changes.length = trackScore.total = 0;
  if(trackScore.possibleMoves <= trackScore.changes.length)
    return;
  trackScore.total += change;
  trackScore.changes.unshift(change);
}
// add some initial values
trackScore.changes = [];
trackScore.total = 0;
trackScore.possibleMoves = 250;
function start(){
  trackScore("reset");
  setTimeout(runner,10);
}
function runner(){
  var i = Math.floor((-0.50 + Math.random()) * 1000);
  trackScore(i);
  update();
  setTimeout(runner,1);
}
function update(){
  $('#change').html(
    _.template($("#tmpl").html(),trackScore)
  );
}
$("body").on("click","#change",start);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
shanimalpro
0viewers