Advertisement
lemansky

Untitled

Nov 29th, 2022
1,067
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.65 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
  8.     <script>
  9.         document.addEventListener('DOMContentLoaded', () => {
  10.             let arr = [];
  11.             let index = 0;
  12.             let counter = 0;
  13.             let obj = {};
  14.             let btn = document.querySelector('.btn-primary');
  15.             let chart = document.querySelector('.chart');
  16.             let prev = document.querySelector('.prev');
  17.             let next = document.querySelector('.next');
  18.             let endpoint = 'latest'
  19.             let fromField = document.querySelector('.from-field');
  20.             let toField = document.querySelector('.to-field');
  21.             let selected = document.querySelector('.user-select');
  22.             let myHeaders = new Headers();
  23.             myHeaders.append("apikey", "JXB6DgP0D0hFlqUuyzHz5W6w7gcj3kre");
  24.  
  25.             let requestOptions = {
  26.               method: 'GET',
  27.               redirect: 'follow',
  28.               headers: myHeaders
  29.             };
  30.  
  31.            
  32.             const printBars = (obj, counter) => {
  33.                 chart.innerHTML = '';
  34.                 Object.keys(obj).forEach((k, index) => {                    
  35.                     if(index >= 10*counter && index < 10 * (counter+1)){
  36.                        let bar = document.createElement('div');
  37.                         bar.classList.add('bar');
  38.                         bar.style.height = obj[k] + 'px';
  39.                         bar.innerHTML = '<span class="label">'+obj[k]+'</span>' + k;
  40.                         chart.append(bar);
  41.                     }
  42.                     index++;
  43.                 });
  44.             }
  45.  
  46.             const loadData = (val) => {
  47.                 switch(parseInt(selected.value)){
  48.                     case 1: toField.value = parseInt(fromField.value) * val.rates.BGN + '.лв'; break;
  49.                     case 2: toField.value = '$'+ parseInt(fromField.value) * val.rates.USD; break;
  50.                     case 3: toField.value = '¥' + parseInt(fromField.value) * val.rates.JPY; break;
  51.                     default: break;
  52.                 }
  53.                 Object.keys(val.rates).forEach((k, index) => {  
  54.                     if(val.rates[k] <= 100){  
  55.                        obj[k] = val.rates[k];
  56.                        // vzemame samo valuti 4iqto stoinost e maksimum 100 sprqmo 1 evro za se zapazi sravnitelnata sposobnost na grafikite
  57.                    }
  58.                });
  59.                counter++;
  60.                printBars(obj, counter-1);  
  61.                next.classList.remove('disabled');
  62.                prev.classList.remove('disabled');
  63.            }
  64.  
  65.            btn.addEventListener('click', (e) => {
  66.                 if(arr.length < 1){
  67.                    fetch('https://api.apilayer.com/fixer/' + endpoint, requestOptions)
  68.                    .then(response => response.json())
  69.                     .then(items => {
  70.                         loadData(items);
  71.                         arr = {...items};
  72.                        
  73.                     });
  74.                 } else {
  75.                     loadData(arr);
  76.                 }
  77.             });
  78.  
  79.             next.addEventListener('click', (e) => {
  80.                 counter++;
  81.                 printBars(obj, counter-1);
  82.             });
  83.             prev.addEventListener('click', (e) => {
  84.                 counter--;
  85.                 printBars(obj, counter-1);
  86.             });
  87.            
  88.         });
  89.  
  90.        
  91.     </script>
  92.     <style>
  93.         .chart{
  94.             height: 200px;
  95.             display:flex;
  96.         }
  97.         .bar{
  98.             display:inline-block;
  99.             margin-right:8px;
  100.             transform: translate(0, -100%);
  101.             position:relative;
  102.             bottom:-100%;
  103.             background:#64f38c;
  104.             width:calc(10% - 8px);
  105.         }
  106.         .label{
  107.             position: absolute;
  108.             transform: translate(0, -100%);
  109.         }
  110.     </style>
  111. </head>
  112. <body>
  113.     <div class="container">
  114.         <div class="row flex-column ">
  115.             <div class="col-6 mt-3 mx-auto">
  116.                 <div class="form-group">
  117.                     <select class="form-select user-select">
  118.                         <option selected="">Избери валута</option>
  119.                         <option value="1">Български лев</option>
  120.                         <option value="2">Щатски долар</option>
  121.                         <option value="3">Японска йена</option>
  122.                     </select>
  123.                 </div>
  124.                 <div class="form-group">
  125.                     <label for="">Сума в Евро</label>
  126.                     <input type="text" class="form-control from-field">
  127.                 </div>
  128.                 <div class="form-group">
  129.                     <label for="">Крайна сума</label>
  130.                     <input type="text" class="form-control to-field">
  131.                 </div>
  132.                 <div class="form-group d-grid my-3">
  133.                     <input type="button" class="btn btn-primary " value="Конвертирай">
  134.                 </div>
  135.             </div>
  136.             <div class="chart">
  137.  
  138.             </div>
  139.             <div class="text-center w-100 mt-5">
  140.                 <a href="#" class="disabled prev d-inline-block btn btn-danger"><<</a>
  141.                 <a href="#" class="disabled next d-inline-block btn btn-danger">>></a>
  142.             </div>
  143.            
  144.         </div>
  145.     </div>
  146. </body>
  147. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement