Advertisement
deyanivanov966

Упражнение 2 Банков Решение на задача калкулатор от УПР. 2

Jan 13th, 2022
639
0
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.     <script>
  21.         document.addEventListener('DOMContentLoaded', () => {
  22.             let btns = document.querySelectorAll('.btn-default');
  23.             btns.forEach(item => {
  24.                 item.addEventListener('click', (e) =>{
  25.                     // console.log(e.target.value);
  26.                     let pole = document.querySelectorAll('#result')[0];
  27.                    
  28.                     pole.value = pole.value + e.target.value;
  29.                     pole.dataset.current = pole.dataset.current + e.target.value;
  30.                     // pole.dataset.total = pole.dataset.current;
  31.                 });
  32.             });
  33.  
  34.             let op = document.querySelectorAll('.btn-primary');
  35.             op.forEach(m => {
  36.                 m.addEventListener('click', (e) => {
  37.                     let pole = document.querySelectorAll('#result')[0];
  38.  
  39.                     if(e.target.value == '-' && pole.dataset.current == ''){
  40.                         pole.dataset.current = '-';
  41.                         pole.value = pole.value + '-';
  42.                     } else {
  43.  
  44.                         switch(pole.dataset.operation){
  45.                             case '+': pole.value = parseInt(pole.dataset.total) + parseInt(pole.dataset.current); break;
  46.                             case '-': pole.value = parseInt(pole.dataset.total) - parseInt(pole.dataset.current);
  47.                             break;
  48.                             case '/': pole.value = parseInt(pole.dataset.total) / parseInt(pole.dataset.current); break;
  49.                             case 'x': pole.value = parseInt(pole.dataset.total) * parseInt(pole.dataset.current); break;
  50.                             default: console.log('nyama pyrva operacia'); break;
  51.                         }
  52.                         pole.dataset.operation = e.target.value;
  53.                         pole.dataset.total = pole.value;
  54.                         pole.dataset.current = '';
  55.                         pole.value = pole.value + e.target.value;
  56.                     }
  57.                    
  58.                 });
  59.             });
  60.        
  61.             let pole = document.querySelectorAll('#result')[0];
  62.             pole.addEventListener('input', (e) => {
  63.                 if(e.target.value == ''){
  64.                     e.target.dataset.operation = '';
  65.                     e.target.dataset.total = 0;
  66.                     e.target.dataset.current = '';
  67.                 }
  68.             });
  69.         });
  70.     </script>              
  71. </head>
  72.     <body>
  73.         <div class="container">
  74.             <div class="row">
  75.                 <input type="text" class="form-control" value="" id="result" data-operation="" data-total="0" data-current="">
  76.                 <p>&nbsp;</p>
  77.             </div>
  78.             <div class="row">
  79.                 <div class="form-group col-lg-12">
  80.                     <input type="button" class="btn btn-default" value="7">
  81.                     <input type="button" class="btn btn-default" value="8">
  82.                     <input type="button" class="btn btn-default" value="9">
  83.                     <input type="button" class="btn btn-primary" value="/">
  84.                 </div>
  85.                 <div class="form-group col-lg-12">
  86.                     <input type="button" class="btn btn-default" value="4">
  87.                     <input type="button" class="btn btn-default" value="5">
  88.                     <input type="button" class="btn btn-default" value="6">
  89.                     <input type="button" class="btn btn-primary" value="x">
  90.                 </div>
  91.                 <div class="form-group col-lg-12">
  92.                     <input type="button" class="btn btn-default" value="1">
  93.                     <input type="button" class="btn btn-default" value="2">
  94.                     <input type="button" class="btn btn-default" value="3">
  95.                     <input type="button" class="btn btn-primary" value="-">
  96.                 </div>
  97.                 <div class="form-group col-lg-12">
  98.                     <input type="button" class="btn btn-default" value="0">
  99.                     <input type="button" class="btn btn-primary" value=".">
  100.                     <input type="button" class="btn btn-danger" value="=">
  101.                     <input type="button" class="btn btn-primary" value="+">
  102.                 </div>
  103.             </div>
  104.         </div>
  105.  
  106.     </body>
  107. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement