SHARE
TWEET

Untitled

a guest Nov 16th, 2019 74 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Progress</title>
  6.     <script type="text/javascript" rel="script" src="javascript/jquery-3.3.1.js"></script>
  7.  
  8.  
  9.     <style>
  10.         .container{
  11.             width: 500px;
  12.             margin: auto;
  13.         }
  14.         .progress{
  15.             margin: 0;
  16.             padding: 0 ;
  17.             background: red;
  18.             width: 0;
  19.             height: 30px;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.  
  25. <div class="container">
  26.     <div>
  27.         <button id="minus" style="padding-right: 10px">-10</button>
  28.         <button id="plus">+10</button>
  29.     </div>
  30.     <div id="full-progress" style="padding: 0; width: 500px">
  31.         <div class="progress">
  32.         </div>
  33.     </div>
  34. </div>
  35.  
  36. <script>
  37.     $(document).ready(function () {
  38.  
  39.         $('#plus').click(function () {
  40.             let progress = $('.progress');
  41.             let fullProgress = $('#full-progress');
  42.  
  43.             if(!(progress.css('width') == fullProgress.css('width'))){
  44.                 progress.css('width', '+=10%');
  45.             }
  46.  
  47.         });
  48.         $('#minus').click(function () {
  49.             let progress = $('.progress');
  50.             let fullProgress = $('#full-progress');
  51.  
  52.             if(!(progress.css('width') == "0px")){
  53.                 progress.css('width', '-=10%');
  54.             }
  55.         });
  56.  
  57.     })
  58. </script>
  59. </body>
  60. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top