index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tarea Cambio</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons+Outlined">
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>

<body class="container-fluid">

    <form id='convertir'>

        <div class="d-flex gap-3 p-3 align-items-center">


            <select name="selector" id="selector-de-moneda1" aria-label="Default select example"
                class="form-select text-center">
                <option selected>Elegí la moneda</option>
                <option value="ARS">Pesito</option>
                <option value="USD">Dólar yanki</option>
                <option value="EUR">Euro</option>
                <option value="VES">Bolívar venezolano</option>
                <option value="BRL">Moneda brasuca</option>
                <option value="CDF">Congo peso</option>
                <option value="CAD">Dólar canadiense</option>
                <option value="GBP">Libra estarlina</option>
                <option value="RUB">Rublo</option>
                <option value="AFN">Moneda talibana</option>
            </select>

            <span class="material-icons-outlined" id="monedas2">
                double_arrow
            </span>


        </div>


        <input type="date" id="fecha">

        <input type="number" id="cantidad" class="form-control m-3" aria-label="Disabled input example">


        <button type="submit" class="btn btn-primary active m-3" id="convertirValores">Convertir</button>

    </form>


    <h3 class="d-none gap-3 p-4 align-items-center d-flex border border-primary rounded-pill justify-content-center" id="mostrar">
        <div>
            <span id="mostrarCantidad"></span>
            <span id="mostrarPrimeraMoneda"></span>
        </div>

        <a href="javascript:void(0)" id="change" class="text-decoration-none">
            <span class="material-icons-outlined" id="arrow">
                compare_arrows

            </span>
        </a>

        <div>
            <span id="mostrarValor"></span>
            <span id="mostrarSegundoMoneda"></span>
        </div>
    </h3>


    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="js/js.js"></script>
</body>

</html>