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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body class="orderIndex">
  <div class="counter">
    <span class="countUp countButton">+</span>
    <span class="countDisplay">0</span>
    <span class="countButton">-</span>
  </div>
</body>
</html>
​
 
.orderIndex .counter span { float: left; display: inline-block; font-weight: bold; }
.orderIndex .countButton { cursor: pointer; padding: 8px 15px; background: #4c4c4c; color: white; font-size: 22px; border-radius: 24px; }
.orderIndex .countDisplay { border-radius: 3px; padding: 12px 18px; margin: 0 20px; border: 1px solid #999; color: #333; }
 
        $(".countButton").click(function (e) {
            var btn = $(this);
            var countUp = btn.hasClass("countUp");
            var display = countUp ? btn.next("span") : btn.prev("span");
            var currentCount = parseInt(display.text());
            if (!currentCount && !countUp)
                return; // zero. can't get lower than zero.
            if (countUp) {
                currentCount++;
            } else {
                currentCount--;
            }
            display.text(currentCount).focus();
        });
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers