Um projeto pessoal cujo a ideia é que o sapato que está em SVG troque de cor, conforme for clicando nas opções. Mas não irá trocar somente a cor, como também o preço e caso clique no adicionar carrinho irá adicionar a quantidade.

No menu de três opções de sapatos, ao clicar no produto, irá trocar o SVG e seus respectivos valores de acordo com a opção escolhida.

O projeto também está dividido em ferramentas e técnicas de desenvolvimento, onde irei colocar em forma de versões para que fique de fácil discernimento para mim.

Versão 1 - Core Product.

Essa versão será implementada da forma mais simples possível. Estou usando:

• Stylus - http://stylus-lang.com/

• Browsersync - https://browsersync.io/

Esses dois acima é para facilitar um pouco a produtividade, porém não coloquei nenhum automatizador de tarefas ou algo assim como Gulp, MakeFile, nada, nadinha.

• HTML

• JS

• DOM

RSCSS - http://rscss.io/ (bem simples rs)

Versão 2 - Refatoração

Irei refatorar a Versão 1, pois contém formas que foram feitas que não estou gostando, exemplo, estou inserindo o SVG direto no HTML e está feio na organização e estrutura. Quero deixar bem organizadinho. Ou seja:

• Irei dedicar o esforço para deixar da forma que acredito que seja melhor utilizando RSCSS.

• Refatorar HTML e JS também.

Versão 3 - Performance

Irei validar toda performance do projeto. E melhorar da melhor forma possível, estou usando esses documentos como base de estudo:

https://github.com/thedaviddias/Front-End-Performance-Checklist

https://github.com/thedaviddias/Front-End-Checklist

Versão 4 - Mesmo projeto com Jquery. - https://jquery.com/

Versão 5 - Mesmo projeto com React. - https://reactjs.org/

Versão 6 - Mesmo projeto com Vue.js. - https://vuejs.org/

Versão 7 - Mesmo projeto com Angular. - https://angular.io/

Versão 8 - Mesmo projeto com Fractal - https://fractal.build/

Versão 9 - Mesmo projeto com Ember.js - https://www.emberjs.com/

É um projeto a longo prazo e meu interesse nisso é o conhecimento, caso tenham sugestões, criticas, ideias, estarei interessado em saber. Link do Projeto:

https://github.com/wilsonbrito/web-grafitti

Está com todos os arquivos que pensei entre outros, quando a versão 1 começar a ficar mais organizada, irei criar outro projeto e deixar a versão 1 lá, esse será o principal que irá direcionar para seus respectivos filhos. Caso queira ver o progresso atual, segue link. (EM ANDAMENTO)

https://wilsonbrito.github.io/web-grafitti/

Link do Mockup que montei: https://xd.adobe.com/spec/484292b0-f738-45ae-4ecc-10547d8b1de6-3e73/