frontend-cro-bar

  • OBJETIVO: Estimular o usuário a efetuar um maior número de compras com o uso de uma barra progressiva que indique que a partir de R$100 em compras, o frete é grátis.
  • DESCRIÇÃO: Conforme o consumidor for adicionando/removendo produtos ao carrinho, a barra de progresso do frete grátis irá avançando ou retrocedendo.

PASSOS PARA REPRODUZIR:

  • abrir o link no Google Chrome, e utilizando a extensão Chrome User Javascript and CSS, adicionei o código JS e CSS que está contido na pasta codigo_desafio

COMO CHEGUEI NA SOLUÇÃO:

  • Foi feito um teste de código em minha máquina local usando VSCode (que está na pasta codigo_base) Em meu código reproduzi a barra de frete sugerida no desafio, como na imagem abaixo:

  • para reproduzir o carrinho, adicionei um array, que recebe um Reduce para somar e fazer a progressbar andar para frente conforme os itens são adicionados.

  • ao ter certeza de que estava minimamente funcional, fui adicionando e adaptando o código no navegador até obter o resultado desejado.

DEMONSTRAÇÃO:

demonstração código