Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html style="height:100%;padding:0;margin:0;font-size: 64px">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
@keyframes move {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 28px 0;
    }
}
.wait{
    background-image: repeating-linear-gradient(
        45deg,
        rgba(0,0,0,.02),
        rgba(0,0,0,.02) 9px,
        rgba(255,255,255,.02) 10px,
        rgba(255,255,255,.02) 20px
    ) !important;
    background-size: 28px 28px !important;
    animation: move .25s steps(6) infinite !important;
  color: gray;
}
    div {
      margin:auto;
      cursor:pointer;
      padding: .25em;
      line-height: .75;
    }
    .error {
      color: red
    }
  </style>
</head>
<body style="display:flex;height:100%;margin:0">
  <div onclick="toggle(this)"></div>
  <script>
    var timer
    function toggle(el){
      el.classList.remove( 'error' )
      var heart = el.innerText = el.innerText === '♡' ? '❤' : '♡'
      el.classList.add( 'wait' )
      clearTimeout( timer )
      timer = setTimeout( function(){
        if( Math.random() < .25) {
          el.classList.add('error')
          el.innerText = { '❤' : '♡' , '♡' : '❤' }[ heart ]
        }
        el.classList.remove( 'wait' )
      } , 3000 )
    }
  </script>
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers