Aprenda a fazer um gerador de border radius com React JS
No ultimo vídeo do Filipe Deschamps ele fala sobre um repositório com mais de 80 ideias para projetos. São ideais genias e que faz a sua cabeça explodir e te deixa com uma sensação de “Cara, eu preciso tentar fazer isso !!!”. Se você não sabe quem é o Filipe corre lá no canal dele, pega uma carga de FULL DOPAMINA e volta aqui pra gente continuar.
- Mostrar uma caixa que vai receber as props do border radius
- Permitir que as 4 bordas recebam valores diferentes
- Permitir que as 4 bordas receba uma valor único
- gerar o código CSS final para uma caixa de texto. Sendo possível copiar.
Vamos a o layout. Eu pensei em algo bem simples. Será uma textarea com 4 inputs, um em cada ponta. Toda vez que modificarmos um valor no input a o canto correspondente a ele deve ficar arredondado.
Eu sei, ficou bem parecido com um gerador que tem na internet. Mas o nosso objetivo é apenas entender como fazer esse projeto. Fique a vontade para mudar as coias. Você pode usar input ranger/slider ao invés de caixa de texto.
Confira o vídeo com os detalhes do código.
Comenta lá ou aqui o que você achou. Se você tiver alguma dúvida será um prazer ajudar.
Para ver o código completo do projeto basta acessar o repositório bem aqui