Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Practice Refactoring to jQuery">
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>Practice Refactoring to jQuery</title>
</head>
<body>
  <div id="refrigerator">
    <div class="oranges">
      <img src="https://whydyoueatthat.files.wordpress.com/2011/12/oranges-vitamin-c-lg.jpg">
    </div>
    <div class="apples">
      <img src="http://lymanorchards.com/files/7013/6725/1487/apples.jpg">
    </div>
  </div>
</body>
</html>
 
$(document).ready(function() {
  alert("Pick a healthy snack from the refrigerator!");
});
$('.oranges').click(function(){
  $(this).css('border', '5px solid orange');
  alert('You chose an orange!');
});                        
                        
$('.apples').click(function(event){
  $(this).css('border', '5px solid red');
  alert('You chose an apple!');
});
  
Output

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

Dismiss x
public
Bin info
SamEurekapro
0viewers