Carousel 3element Help for createeeeeeeee [closed]

bootstrap 5 min.css latest version 5.1.3 carousel 3 element
lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum

const elementUSD = document.querySelector('[data-value="USD"]')
const elementEUR = document.querySelector('[data-value="EUR"]')
const elementRUB = document.querySelector('[data-value="RUB"]')
const rates = []

const input = document.querySelector('#input')
const result = document.querySelector('#result')
const select = document.querySelector('#select')
const select2 = document.querySelector('#select2')


const getCourses = async() => {
    const response = await fetch('https://www.cbr-xml-daily.ru/daily_json.js')
    const data = await response.json()
    const result = await  data;
    result.Valute.AMD.Nominal = 1
    result.Valute.AMD.Value = 1
    result.Valute.AMD.Previous = 1
    result.Valute.RUB = {Previous:6.17625, Value: 6.15124}
    console.log(result);

    rates.USD = result.Valute.USD
    rates.EUR = result.Valute.EUR
    rates.AMD = result.Valute.AMD
    rates.RUB = result.Valute.RUB
    rates.USD.Value*=rates.RUB.Value
    rates.EUR.Value*=rates.RUB.Value
    rates.USD.Previous*=rates.RUB.Previous
    rates.EUR.Previous*=rates.RUB.Previous
    console.log(rates);
    elementUSD.textContent=(rates.USD.Value).toFixed(2)
    elementEUR.textContent=(rates.EUR.Value).toFixed(2)
    elementRUB.textContent=rates.RUB.Value.toFixed(2)

    if(rates.USD.Value > rates.USD.Previous){
        elementUSD.classList.add('bottom')
    }else{
        elementUSD.classList.add('top')
    }
    if(rates.EUR.Value > rates.EUR.Previous){
        elementEUR.classList.add('bottom')
    }else{
        elementEUR.classList.add('top')
    }
    if(rates.RUB.Value > rates.RUB.Previous){
        elementRUB.classList.add('bottom')
    }else{
        elementRUB.classList.add('top')
    }
}
getCourses()


const convertValue = () => {
result.value = (rates.AMD.Value * input.value / rates[select2.value].Value).toFixed(2)
}

input.oninput = convertValue

select.oninput = convertValue

select2.oninput = convertValue
*{
    font-family: 'Rubik', sans-serif;
}

.MTitle{
padding-bottom: 15px;
}
.courses{
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}
.CBlock{
    border: 1px solid grey;
    padding: 10px 15px 10px 15px;
    margin-left: 10px;
    margin-right: 10px;
}
.CBTitle{
padding-bottom: 20px;
}
.CBCourse{
    text-align: center;
    font-size: 24px;
}
.bottom{
    color: red;
}
.top
{
    color: green;
}

.carousel-control-next{
height: 30%;
 margin-top: 80px;
}
.carousel-control-next-icon{
margin-left:55px;
}
.carousel-control-prev-icon{
margin-right:55px;
}
.carousel-control-prev{
height: 30%;
margin-top: 80px;
margin-right: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Valute Converter</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body style="background-color: #1b1b1b;">

<div class="container-xxl">
    <div class="row justify-content-center">
        <div class="col-6 p-5">
            <div class="card p-3" style="background-color: #18191a;">
                <form>
                <h2 class="MTitle" style="color: white;">Converter Valute</h2>

                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
                </a>
                <div class="courses ">
                    <div class="col">
                    <div class="CBlock">    
                    <div class="CBTitle" style="color:white;">Course USD</div>
                    <div class="CBCourse" data-value="USD">--.--</div>
                    </div>
                    </div>
                    <div class="col">
                    <div class="CBlock">
                    <div class="CBTitle" style="color:white;">Course EUR</div>
                    <div class="CBCourse" data-value="EUR">--.--</div>
                    </div>
                    </div>
                    <div class="col">
                    <div class="CBlock">
                    <div class="CBTitle" style="color:white;">Course RUB</div>
                    <div class="CBCourse" data-value="RUB">--.--</div>
                    </div>
                    </div>
                </div>
                <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
                </a>
                <div class="row mb-1">
                    <div class="col"><label style="color: white;" for="name">From:</label>
                    <select disabled class="form-control" id="select">
                        <option value="AMD" selected>AMD - Դրամ</option>
                    </select>
                    </div>
                    <div class="col"><label style="color: white;" for="name">To:</label>
                    <select style="cursor:pointer;" class="form-control" id="select2">
                        <option value="EUR">EUR - Եվրո</option>
                        <option value="USD">USD - Դոլլար</option>
                        <option value="RUB">RUB - Ռուբլի</option>
                    </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col"><input type="number" id="input" class="form-control"></div>
                    <div class="col"><input type="number" class="form-control" id="result" disabled></div>
                </div>
                </form>
        </div>
            </div>


    </div>
    <h5 style="margin-left:60%;color: white;">Directed by: Me</h5>
</div>    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    <script src="./js/app.js">

    </script>
</body>
</html>