Exercício: Nova taxa do Mercado Livre

Para aqueles que acompanham, recentemente o Mercado Livre informou que estará aplicando uma nova taxa sobre os produtos vendidos (veja aqui). Mas resumindo, vendas com valor maior ou igual a R$120,00 terão um taxa percentual de cobrança, enquanto as abaixo terão a taxa percentual mais uma taxa fixa de R5,00.

Vamos então criar uma calculadora que permite aos vendedores saberem quanto eles pagarão de taxas para anunciar um produto que eles vendem.

O que você precisa saber:

Existem 3 tipos de anúncios (grátis, clássico e premium), cada um com taxas percentuais diferentes.
O anúncio grátis é o único que nunca terá a taxa fixa (pois é grátis).

Regras:

Trabalhe como se você estivesse pegando o código de outro e alterando apenas o necessário
- O arquivo HTML não pode ser mexido/alterado.
- O arquivo JavaScript pode ter código adicionado, mas não alterado
Você precisará exibir o valor da taxa cobrada na moeda Real (temos um exercício que já pediu isso)
- com sinal R$
- virgula antes dos centavos

Conhecimentos Trabalhados ou úteis

Manipulação básica do DOM
Entendimento básico de Objetos
Entender percentuais

Código HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <h2>Calculadora Mercado Livre</h2>
    <p>
        <input id="inputValor" type="number" />
    </p>
    <p>
        <select id="selectTipoAnuncio"></select>
    </p>
    <p>
        <button onclick="calcularTaxaML()">Calcular</button>
    </p>
    <p>
        Valor da taxa cobrada:
        <br/>
        <span id="resultado"></span>
    </p>
</body>
</html>

Código JavaScript:

window.onload = function () {
    let tiposAnuncio = [
        {
            titulo: "Grátis",
            taxa: 0.00
        },
        {
            titulo: "Clássico",
            taxa: 0.11
        },
        {
            titulo: "Premium",
            taxa: 0.16
        }
    ];

    montarSelect(tiposAnuncio);
};

function montarSelect(listaTipoAnuncios) {
    let selectTipoAnuncio = document.getElementById("selectTipoAnuncio");

    for (let index = 0; index < listaTipoAnuncios.length; index++) {
        /*
            TODO: com o objeto passado. execute a seguinte lógica:
            - O select exibirá o texto para o usuario
            - cada texto estará vinculado ao valor da taxa
            - com isso se o usuario selecionar clássico, o valor será 0.11
        */
    }
}

function calcularTaxaML() {
    //Pega o valor da venda
    const valorVenda = document.getElementById("inputValor").value;

    //Pega o nome e taxa percentual do anuncio
    const tipoAnuncioSelect; //TODO:  alterar essa linha para pegar a opção de tipo de anuncio selecionada
    const tipoAnuncioNome; //TODO: use a variavel tipoAnuncioSelect para pega a palavra selecionada (grátis, etc..)
    const tipoAnuncioTaxa; //TODO: novamnete, use a variavel tipoAnuncioSelect, mas pegue a taxa (0 , 0.11, etc..)

    //Pega a tag onde será exibido o resultado
    const resultado = document.getElementById("resultado");

    if (tipoAnuncioNome === "Grátis") {
        resultado.innerHTML = formatarDinheiro(0);
    } else {
        /*
        TODO: Criar a regra para anúncios clássico e premium
        */
    }
}

function formatarDinheiro(valor) {
    /*
    TODO: Converter o valor recebido em reais
    Exemplo: 
    0 -> R$ 0,00
    0.4 -> R$ 0,40
    12 -> R$ 12,00
    */
}

Segue abaixo uma possível solução (existem outras). Se quiser compartilhar sua resposta, mande para nós que iremos adiciona-laáaqui e colocar você como autor.

[download id=”1096″]

Deixe um comentário Cancelar resposta