Codigo para Bing

Imagen de como se ve en el navegador:

Codigo en de mi editor:

    @import url(‘https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap’);

    * {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    }

    :root {

    –font: ubuntu;

    –main-color: rgb(54, 172, 250);

    –secundary-color: rgb(12, 13, 80);

    }

    .wrapper_calculator {

    margin: 0;

    padding: 0;

    width: 100%;

    min-width: 250px;

    display: flex;

    justify-content: center;

    }

    .box_calculator {

    width: 100%;

    min-width: 250px;

    padding: 20px;

    }

    .paypal_fees {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    }

    .paypal_fees span {

    margin: 7px;

    font-size: 30px;

    color: var(–main-color);

    }

    .label_fees {

    width: 100%;

    font-size: 20px;

    font-weight: bold;

    display: flex;

    align-items: center;

    margin-bottom: 20px;

    }

    .paypal_fees input {

    width: 63px;

    padding: 5px;

    background-color: var(–secundary-color);

    border-radius: 5px;

    color: white;

    font-weight: bold;

    font-family: var(–font), Arial, Helvetica, sans-serif;

    font-size: 18px;

    text-align: center;

    margin: 3px;

    border: none;

    border-left: 5px solid var(–main-color);

    border-right: 5px solid var(–main-color);

    }

    input.inputs {

    display : block ;

    border :1 px solid rgba (0 ,0 ,0 ,0.150) ;

    width :100 % ;

    padding :7 px ;

    font-size :16 px ;

    font-family : var (–font) , Arial , Helvetica , sans-serif ;

    font-weight : bold ;

    outline : none ;

    border-radius :7 px ;

    border-left :5 px solid var (–main-color) ;

    border-right :5 px solid var (–main-color) ;

    margin-bottom :3 px ;

    text-align : center ;

    }

    .inputs.disabled {

    background-color : var (–secundary-color) ;

    color : white ;

    }

    .title_fees {

    display : flex ;

    margin-bottom :20 px ;

    min-height :80 px ;

    }

    .title_icon {

    min-height :80 px ;

    min-width :80 px ;

    background-color : var (–secundary-color) ;

    border-radius :10 px0 px0 px10 px ;

    }

    .box_tip {

    padding :10 px ;

    line-height :18 px ;

    max-width :500 px ;

    background-color : var (–main-color) ;

    color : rgb (255 ,255 ,255) ;

    font-family : var (–font) , Arial , Helvetica , sans-serif ;

    font-weight : bold ;

    display : flex ;

    align-items : center ;

    border-radius :0 px10 px10 px0 px ;

    }

    .paypal_fees label {

    width :100 % ;

    display : flex ;

    justify-content : center ;

    font-family : var (–font) , Arial , Helvetica , sans-serif ;

    font-weight : bold ;

    }

    .box_send_receive label {

    text-align : center ;

    margin-top :5 px ;

    width :100 % ;

    }

    .box_send_receive span {

    font-size :20 px ;

    margin-left :3 px ;

    }

    .calculator_send , .calculator_receive {

    width :35 % ;

    border-radius :20 px ;

    display : flex ;

    flex-direction : column ;

    align-items : center ;

    padding :20 px30 px ;

    min-width :100 px ;

    font-family : var (–font) , Arial , Helvetica , sans-serif ;

    box-shadow :0 px0 px10 px1 px rgba (0 ,0 ,0 ,0.082) ;

    margin :10 px ;

    }

    .box_send_receive {

    display : flex ;

    flex-wrap : wrap ;

    }

    .title_icon , .info {

    display : flex ;

    justify-content : center ;

    align-items : center ;

    }

    .info {

    width :40 px ;

    height :40 px ;

    background-color : var (–main-color) ;

    border-radius :50 % ;

    font-size :30 px ;

    animation : info 1 s infinite ease ;

    color : var (–secundary-color) ;

    font-family : Impact , ‘Arial Narrow Bold’ , sans-serif ;

    }

    @keyframes info {

    0 % {

    width :40 px ;

    height :40 px ;

    }

    50 % {

    width :50 px ;

    height :50 px ;

    font-size :45 px ;

    }

    100 % {

    width :40 px ;

    height :40 px ;

    }

    }

    @media screen and (max-width: 640px) {

    .calculator_send, .calculator_receive {

    flex-wrap: wrap;

    width: 100%;

    }

    }

    @media screen and (max-width: 356px) {

    .label_fees {

    font-size: 14px;

    }

    .paypal_fees span {

    font-size: 14px;

    }

    .label_fees input {

    font-size: 14px;

    width: 50px;

    }

    }

    @media screen and (max-width: 286px) {

    .label_fees {

    font-size: 12px;

    }

    .paypal_fees span {

    font-size: 10px;

    }

    .label_fees input {

    font-size: 12px;

    width: 45px;

    }

    }

    @media screen and (max-width: 262px) {

    .label_fees {

    font-size: 10px;

    }

    .label_fees input {

    font-size: 10px;

    width: 40px;

    }

    }

    </style>

    <main class=»wrapper_calculator»>

    <form class=»box_calculator»>

    <div class=»paypal_fees»>

    <div class=»title_fees»>

    <div class=»title_icon»>

    <div class=»info»>!</div>

    </div>

    <div class=»box_tip»>

    <p class=»tip»>

    ¡Con esta calculadora podrá saber cuanto llega de un envio y/o saber cuanto enviar

    para que llegue un monto específico!

    </p>

    </div>

    </div>

    <label class=»label_fees» for=»»>PayPal Fee:

    <input type=»text» id=»porcentage» class=»fees» placeholder=»5.4%» value=»5.4″ disabled>%<span>+</span>$

    <input type=»text» id=»comision» class=»fees» placeholder=»$0.30″ value=»0.30″ disabled>

    </label>

    </div>

    <div class=»box_send_receive»>

    <div class=»calculator_send»>

    <label for=»send»>Si Envia:

    <input type=»text» id=»send» class=»inputs» placeholder=»Digite un monto»>

    </label>

    <label for=»»>Comisión:

    <input type=»text» id=»send_fees» class=»inputs disabled fees» disabled>

    </label>

    <label for=»»>Se Recibe:

    <input type=»text» id=»send_recieve» class=»inputs disabled» disabled>

    </label>

    <label for=»»>En Bolívares:

    <input type=»text» id=»send_bolivares» class=»inputs disabled» disabled>

    </label>

    </div>

    <div class=»calculator_receive»>

    <label for=»send_2″>Para Recibir:

    <input type=»text» id=»send_2″ class=»inputs» placeholder=»Digite un monto»>

    </label>

    <label for=»»>Comisión:

    <input type=»text» id=»send_fees_2″ class=»inputs disabled fees» disabled>

    </label>

    <label for=»»>Debe Enviar:

    <input type=»text» id=»send_recieve_2″ class=»inputs disabled» disabled>

    </label>

    <label for=»»>En Bolívares:

    <input type=»text» id=»send_bolivares_2″ class=»inputs disabled» disabled>

    </label>

    </div>

    </div>

    </form>

    </main>

    <script>

    const porcentagePp = parseFloat(document.querySelector(‘#porcentage’).value);

    const comisionPp = parseFloat(document.querySelector(‘#comision’).value);

    const send = document.querySelector(‘#send’);

    const send_2 = document.querySelector(‘#send_2’);

    // Tasa de cambio en bolívares

    const tasaCambio = 26.40;

    const getSend = () => {

    const inputAmount = document.querySelector(‘#send’);

    const sendFees = document.querySelector(‘#send_fees’);

    const send_recive = document.querySelector(‘#send_recieve’);

    const send_bolivares = document.querySelector(‘#send_bolivares’);

    const newInputAmount = inputAmount.value.replace(‘,’, ‘.’);

    const amount = parseFloat(newInputAmount);

    const fixedAmount = amount.toFixed(2);

    const menosPorcentage = (porcentagePp * fixedAmount) / 100;

    const menosPorcentageFixed = menosPorcentage.toFixed(2)

    const soloFee = menosPorcentage + comisionPp;

    const soloFeeFixed = soloFee.toFixed(2)

    const menosComision = fixedAmount – menosPorcentageFixed – comisionPp;

    const menosComisionFixed = menosComision.toFixed(2)

    const result = menosComisionFixed;

    if ( !Number(fixedAmount) || fixedAmount == «» || inputAmount.value.length > 20) {

    inputAmount.value = «»;

    sendFees.value = «»;

    send_recieve.value = «»;

    send_bolivares.value = «»;

    } else {

    sendFees.value = soloFeeFixed;

    send_recieve.value = result;

    send_bolivares.value = (result * tasaCambio).toFixed(2);

    }

    }

    const getSend_2 = () => {

    const inputAmount_2 = document.querySelector(‘#send_2’);

    const sendFees_2 = document.querySelector(‘#send_fees_2’);

    const send_recieve_2 = document.querySelector(‘#send_recieve_2’);

    const send_bolivares_2 = document.querySelector(‘#send_bolivares_2’);

    const newInputAmount_2 = inputAmount_2.value.replace(‘,’, ‘.’);

    const amount_2 = parseFloat(newInputAmount_2);

    const fixedAmount_2 = parseFloat(amount_2.toFixed(2));

    const masProcentage = (100 * (comisionPp + fixedAmount_2) / ((0-porcentagePp) + 100))

    const masProcentageFixed = masProcentage.toFixed(2);

    const soloFee_2 = masProcentageFixed – fixedAmount_2;

    const soloFeeFixed_2 = parseFloat(soloFee_2.toFixed(2));

    const feeMasMonto = parseFloat(fixedAmount_2 + soloFeeFixed_2);

    const feeMasMontoFixed = feeMasMonto.toFixed(2);

    const result_2 = feeMasMontoFixed;

    if ( !Number(fixedAmount_2) || fixedAmount_2 == «» || inputAmount_2.value.length > 20) {

    inputAmount_2.value = «»;

    sendFees_2.value = «»;

    send_recieve_2.value = «»;

    send_bolivares_2.value = «»;

    } else {

    sendFees_2.value = soloFeeFixed_2.toFixed(2);

    send_recieve_2.value = result_2;

    send_bolivares_2.value = (result_2 * tasaCambio).toFixed(2);

    }

    }

    send.addEventListener(‘keyup’, getSend)

    send_2.addEventListener(‘keyup’, getSend_2)

    </script>