JSFiddle - React, Tailwind, and code Playground

by mjmitche

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<div id="timer"> <span class="time">2:00</span>

</div>
<div id="options">
<input type="button" class="action_button" value="New Game" id="new_game">
 

 

  </div>

CSS

#timer {
    margin-top: 30px;
    height: 50px;
    font-weight: bold;
    color: #f58541;
    font-size: 26px;
    background-color: #000;
    width: 150px;
    position: relative;
}
.time {
    position: absolute;
    left: 40px;
}

JavaScript

var ClockView = Backbone.View.extend({

    initialize: function() {

    var totalWait = 120;
    var secondsRemaining = totalWait;
    var hasFocus = true;
    var hasJustFailed = false;
    this.model.bind("gameStartedEvent", this.startClock, this);
     
    },
  
    startClock: function(){
      console.log("start clock");

      setInterval(function(){
      this.secondsRemaining -= 1;
      console.log("fart");
      displayTime();
      clock_view.displaytime(); alternative
      this.displayTime(); //alternative
      if(secondsRemaining == 0) $('#timer').fadeOut(1000);
      }, 1000);


    },

    displayTime:  function () {

    
        var minutes = Math.floor(secondsRemaining / 60);
        var seconds = secondsRemaining - (minutes * 60);
        if (seconds < 10) seconds = "0" + seconds;
        var time = minutes + ":" + seconds;
        $('#timer').html(time);
    },
    
  }); 

var clock_view 	  = new ClockView();