lemansky

Untitled

Mar 31st, 2021
474
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html lang="en"><head>
  2.     <meta charset="UTF-8">
  3.     <title>Document</title>
  4.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6.     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  7.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  8.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  9.     <style>
  10.         .btn{
  11.             padding:4px 24px;
  12.         }
  13.         #result{
  14.             width:245px;
  15.             margin-left:15px;
  16.             margin-top:15px;
  17.             margin-bottom:10px;
  18.         }
  19.     </style>
  20. </head>
  21.     <body>
  22.         <div class="container">
  23.             <div class="row">
  24.                 <input type="text" class="form-control" value="" id="result" data-operation="" data-total="0" data-current="">
  25.                 <p>&nbsp;</p>
  26.             </div>
  27.             <div class="row">
  28.                 <div class="form-group col-lg-12">
  29.                     <input type="button" class="btn btn-default" value="7">
  30.                     <input type="button" class="btn btn-default" value="8">
  31.                     <input type="button" class="btn btn-default" value="9">
  32.                     <input type="button" class="btn btn-primary" value="/">
  33.                 </div>
  34.                 <div class="form-group col-lg-12">
  35.                     <input type="button" class="btn btn-default" value="4">
  36.                     <input type="button" class="btn btn-default" value="5">
  37.                     <input type="button" class="btn btn-default" value="6">
  38.                     <input type="button" class="btn btn-primary" value="x">
  39.                 </div>
  40.                 <div class="form-group col-lg-12">
  41.                     <input type="button" class="btn btn-default" value="1">
  42.                     <input type="button" class="btn btn-default" value="2">
  43.                     <input type="button" class="btn btn-default" value="3">
  44.                     <input type="button" class="btn btn-primary" value="-">
  45.                 </div>
  46.                 <div class="form-group col-lg-12">
  47.                     <input type="button" class="btn btn-default" value="0">
  48.                     <input type="button" class="btn btn-primary" value=".">
  49.                     <input type="button" class="btn btn-danger" value="=">
  50.                     <input type="button" class="btn btn-primary" value="+">
  51.                 </div>
  52.             </div>
  53.         </div>
  54.         <script>
  55.             let _btns = document.getElementsByClassName('btn-default');
  56.             for(item of _btns){
  57.                 item.addEventListener('click', (e) => {
  58.                     console.log(e.target.value);
  59.                     let input = document.getElementsByClassName('form-control')[0];
  60.                     if(isNaN(input.value)){
  61.                        input.dataset.current += e.target.value;
  62.                     }
  63.                     input.value += e.target.value;
  64.                 });
  65.             }
  66.  
  67.             let _ops = document.getElementsByClassName('btn-primary');
  68.             for(item of _ops){
  69.                 item.addEventListener('click', (e) => {
  70.                     let input = document.getElementsByClassName('form-control')[0];
  71.                     if(input.dataset.operation != ''){
  72.                         switch(input.dataset.operation){
  73.                             case '+': input.value = parseInt(input.dataset.total) + parseInt(input.dataset.current); break;
  74.                             case '-': input.value = parseInt(input.dataset.total) - parseInt(input.dataset.current); break;
  75.                             case '/': input.value = parseInt(input.dataset.total) / parseInt(input.dataset.current); break;
  76.                             case 'x': input.value = parseInt(input.dataset.total) * parseInt(input.dataset.current); break;
  77.                             default: break;
  78.                         }
  79.                         input.dataset.current = "";
  80.                         input.dataset.operation = e.target.value;
  81.                         input.dataset.total = input.value;
  82.                     }
  83.                     else {
  84.                         input.dataset.total = input.value;
  85.                     }
  86.                     input.value = input.value + e.target.value;
  87.                     input.dataset.operation = e.target.value;
  88.  
  89.                     // if(!isNaN(input.value)){
  90.                     //     input.value += e.target.value;
  91.                     // }
  92.  
  93.  
  94.                 });
  95.             }
  96.         </script>
  97.     </body>
  98. </html>
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×