/challenge-F-009-shopping-cart

Primary LanguageHTML

📋 Indíce

🚀 Proposta

Assim como Linus Torvalds disse "Falar é fácil, me mostre o código". Nós desenvolvedores nunca vamos aprender a programar e desenvolver software sem efetivamente codar, é como tentar aprender a andar de bicicleta lendo livros e vendo vídeos.

E foi assim que essa abordagem nasceu, um roadmap baseado em projetos. A ideia em seu princípio é simples, essa é uma demanda, tente encarar como um desafio técnico e completá-lo em até 7 dias.

Ao completar, não esqueça de publicar no linkedin e adicionar #handsOnRoadmap

🏆 O desafio


Você foi convidado para um dono de um site que demonstra produtos diversos para criar um carrinho de comprar para esse site. Pois ele está pensando em também vender online em vez de só mostrar os produtos e promoções.


🎯 Os requisitos

🎯 Requisitos funcionais


Seu site de carrinho de compras deve:


  • Permitir adicionar produtos ao carrinho

  • Ser possível adicionar mais de um produto do mesmo

  • Mudar a quantidade de produtos já no carrinho

  • Excluir produtos do carrinho

  • Mostrar o valor da unidade e agregado de cada tipo de produto

    -ex: Produto preço/un unds total caneta 1,50 x2 3,00

-permitir fechar a compra

🎯 Requisitos não funcionais


É obrigatório a utilização de:

  • HTML
  • CSS
  • js
  • fazer deploy

📌 Requisitos não obrigatórios


Você será bem avaliado se usar:


  • usar HTML semântico, como tags main, section...
  • usar responsividade
  • organizar e dividir bem os arquivos
  • Estrutura seu código de forma mais limpa e desacoplada usando poo, paradigma funcional ou mesclar ambos.
  • Adicionar uma página de fechar compra
  • Adicionar filtragem aos produtos, seja por nome ou tags.

📸 Screenshots


📱 Mobile design

📱 Tablets design

🖥️ Desktop design

✔️ O que aprendi

🛠 Mão a obra...

Você pode forkar esse projeto e reutilizar o readme e estrutura, mas também se sinta livre para mudar ela ou mesmo criar a sua.

☑️ Pré-requisitos para rodar


  • Editor de código de sua preferência (recomendado VS code)
  • Git
  • ?

📝 Procedimentos de instalação


Clone este repositório usando o comando:

git clone https://github.com/<meu_user>/<my-repo>.git
#processos adicionais aqui

👨🏾‍💻 Desafios similares e dicas

Não há um desafio exatamente parecido no front-end mentor, mas vou deixar o deploy do projeto do Kaio como um exemplo. carrinho de compras


Você também pode usar o dribbble para se inspirar.

Dribbble

😎 Autor