Created
January 10, 2020 14:33
-
-
Save micrometre/3cc1276d328241c73fae4cd0f085cb36 to your computer and use it in GitHub Desktop.
Html css java-script counter
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>CBW</title> | |
| </head> | |
| <style> | |
| body { | |
| background: lightblue; | |
| } | |
| button { | |
| padding: 25px; | |
| background: yellow; | |
| text-shadow: 2px 2px 2px #202020; | |
| font-size: 20pt; | |
| border: 1px solid lightblue; | |
| color: lightblue; | |
| size: auto; | |
| text-align: center; | |
| margin-left: auto ; | |
| margin-right: auto ; | |
| } | |
| input { | |
| padding: 50px; | |
| background: #e7e7e5; | |
| font-size: 33pt; | |
| text-align: center; | |
| margin-left: auto ; | |
| margin-right: auto ; | |
| } | |
| .main { | |
| size: auto; | |
| text-align: center; | |
| margin-left: auto; | |
| margin-right: auto; | |
| margin-top: 10px; | |
| } | |
| h1 { | |
| font-size: 40pt; | |
| text-align: center; | |
| margin-left: auto ; | |
| margin-right: auto ; | |
| } | |
| </style> | |
| <body> | |
| <div class="main"> | |
| <h1>Carpark 1 </h1> | |
| <input type="number" id="amount-1" value="188" min="1" max="300"> | |
| <div class="cart-plus-minus" data-target="amount-1"> | |
| <button class="btn cart-minus-1">-</button> | |
| <button class="btn cart-plus-1">+</button> | |
| </div> | |
| <h1>Carpark 2 </h1> | |
| <input type="number" id="amount-2" value="119" min="1" max="300"> | |
| <div class="cart-plus-minus" data-target="amount-2"> | |
| <button class="btn cart-minus-2">-</button> | |
| <button class="btn cart-plus-2">+</button> | |
| </div> | |
| <script> | |
| (function($) { | |
| var cartButtons = $('.cart-plus-minus').find('button'); | |
| $(cartButtons).on('click', function(e) { | |
| e.preventDefault(); | |
| var $this = $(this); | |
| var target = $this.parent().data('target'); | |
| var target = $('#' + target); | |
| var current = parseFloat($(target).val()); | |
| if ($this.hasClass('cart-plus-1')) | |
| target.val(current + 1); | |
| else { | |
| (current < 2) ? null : target.val(current - 1); | |
| } | |
| }); | |
| }(jQuery)); | |
| </script> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment