Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
​
<meta charset=utf-8 />
<title>GDI jQuery Pt 2</title>
<meta name="viewport" content="width=device-width">
<link href='http://fonts.googleapis.com/css?family=Doppio+One' rel='stylesheet' type='text/css'>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
  
<body>
  
  <div class="wrapper">
    
    <div id="welcome">
      <h1>Girl Develop It!</h1>
      <marquee>
         <h2> Events </h2>
      </marquee>
      <ul>
        <strong>Keyboard Events</strong>
        <li class="keydown">'keydown' </li>
        <li class='keypress'>'keypress' </li>
        <li class='keyup'>'keyup' </li>
      </ul>
      <ul>
        <strong>Mouse Events</strong>
        <li class='click'>'click'</li> 
        <li class='mousedown'>'mousedown'</li> 
        <li class='mouseup'>'mouseup'</li> 
        <li class='mousemove'>'mousemove'</li>
    </ul>
    <ul>
      <strong>Form Events</strong> 
      <li>'change'</li>
      <li>'focus'</li>
      <li>'blur'</li>
    </ul>
    </div>
    
    <div id="features">
      <ol>
        <li>
           <button id="show">Show</button>
           <p>The kitten image is hidden, make it show!</p>
           <img id="show-kitty" style="display:none;" class="triple-kitty3" src="http://placekitten.com/110">
        </li>
        <li>
          <button id="fade">Fade</button>
          <img id="fade-kitty" class="triple-kitty2" src="http://placekitten.com/110">
        </li>
        <li>
           <button id="toggle">Toggle</button>
           <img id="toggle-kitty" class="triple-kitty3" src="http://placekitten.com/110">
        </li>
      </ol>
    </div>
    
    <div id="next">
      <div>
        <h2>Form</h2>
        <form>
          <label>Name</label>
          <input type="text" placeholder=""></input>
          <input type="submit" value="go"></input>
        </form>
      </div>
    </div>
    
  </div>
​
  <script>
    $('#show').click(function() {
      $('#show-kitty').show();
    });
    
  </script>
  
</body>
</html>
Output

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

Dismiss x
public
Bin info
hyendlerpro
0viewers