Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            let arr = [];
            let index = 0;
            let counter = 0;
            let obj = {};
            let btn = document.querySelector('.btn-primary');
            let chart = document.querySelector('.chart');
            let prev = document.querySelector('.prev');
            let next = document.querySelector('.next');
            let endpoint = 'latest'
            let fromField = document.querySelector('.from-field');
            let toField = document.querySelector('.to-field');
            let selected = document.querySelector('.user-select');
            let myHeaders = new Headers();
            myHeaders.append("apikey", "");

            let requestOptions = {
              method: 'GET',
              redirect: 'follow',
              headers: myHeaders
            };


            const printBars = (obj, counter) => {
                chart.innerHTML = '';
                Object.keys(obj).forEach((k, index) => {
                    if(index >= 10*counter && index < 10 * (counter+1)){
                        let bar = document.createElement('div');
                        bar.classList.add('bar');
                        bar.style.height = obj[k] + 'px';
                        bar.innerHTML = '<span class="label">'+obj[k]+'</span>' + k;
                        chart.append(bar);
                    }
                    index++;
                });
            }

            const loadData = (val) => {
                switch(parseInt(selected.value)){
                    case 1: toField.value = parseInt(fromField.value) * val.rates.BGN + '.лв'; break;
                    case 2: toField.value = '$'+ parseInt(fromField.value) * val.rates.USD; break;
                    case 3: toField.value = '¥' + parseInt(fromField.value) * val.rates.JPY; break;
                    default: break;
                }
                Object.keys(val.rates).forEach((k, index) => {
                    if(val.rates[k] <= 100){
                        obj[k] = val.rates[k];
                        // vzemame samo valuti 4iqto stoinost e maksimum 100 sprqmo 1 evro za se zapazi sravnitelnata sposobnost na grafikite
                    }
                });
                counter++;
                printBars(obj, counter-1);
                next.classList.remove('disabled');
                prev.classList.remove('disabled');
            }

            btn.addEventListener('click', (e) => {
                if(arr.length < 1){
                    fetch('https://api.apilayer.com/fixer/' + endpoint, requestOptions)
                    .then(response => response.json())
                    .then(items => {
                        loadData(items);
                        arr = {...items};

                    });
                } else {
                    loadData(arr);
                }
            });

            next.addEventListener('click', (e) => {
                counter++;
                printBars(obj, counter-1);
            });
            prev.addEventListener('click', (e) => {
                counter--;
                printBars(obj, counter-1);
            });

        });


    </script>
    <style>
        .chart{
            height: 200px;
            display:flex;
        }
        .bar{
            display:inline-block;
            margin-right:8px;
            transform: translate(0, -100%);
            position:relative;
            bottom:-100%;
            background:#64f38c;
            width:calc(10% - 8px);
        }
        .label{
            position: absolute;
            transform: translate(0, -100%);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row flex-column ">
            <div class="col-6 mt-3 mx-auto">
                <div class="form-group">
                    <select class="form-select user-select">
                        <option selected="">Избери валута</option>
                        <option value="1">Български лев</option>
                        <option value="2">Щатски долар</option>
                        <option value="3">Японска йена</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="">Сума в Евро</label>
                    <input type="text" class="form-control from-field">
                </div>
                <div class="form-group">
                    <label for="">Крайна сума</label>
                    <input type="text" class="form-control to-field">
                </div>
                <div class="form-group d-grid my-3">
                    <input type="button" class="btn btn-primary " value="Конвертирай">
                </div>
            </div>
            <div class="chart">

            </div>
            <div class="text-center w-100 mt-5">
                <a href="#" class="disabled prev d-inline-block btn btn-danger"><<</a>
                <a href="#" class="disabled next d-inline-block btn btn-danger">>></a>
            </div>

        </div>
    </div>
</body>
</html>