CodePen

HTML

            
              <label for="github"># of Private Repos:</label>
<select id="github">
  <option value="25">0-10</option>
  <option value="50">11-20</option>
  <option value="100">21-50</option>
  <option value="200">51-125</option>
</select>
<br>
<label for="bitbucket"># of contributors:</label>
<select id="bitbucket">
  <option value="0">0-5</option>
  <option value="10">6-10</option>
  <option value="25">11-25</option>
  <option value="50">26-50</option>
  <option value="100">51-100</option>
  <option value="200">>100</option>
</select>

<br>
<br>
<p id="git">Cost at Github: $<span id="cost-github"></span>
</p>
<p id="bit">
Cost at Bitbucket: $<span id="cost-bitbucket"></span>
</p>

            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .winner {
  color: green;
  font-weight: bold;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('#github, #bitbucket').on('change', function(){
  updateWinner();
});

function updateWinner(){
  var gitCost = $('#github').val();
  var bitCost = $('#bitbucket').val();
  $('#cost-github').text(gitCost);
  $('#cost-bitbucket').text(bitCost);

  $('#git, #bit').removeClass('winner');
  
  if(gitCost < bitCost){
    $('#git').addClass('winner');
  }
  else {
    $('#bit').addClass('winner');
  }
}

updateWinner();
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................