Aprenda a fazer um gerador de border radius com React JS

E aii Dev, nesse post você vai aprender um pouco mais sobre a propriedade border-radius
do CSS. Esse props é responsável por arredondar os cantos de um objeto HTML.

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.

Pronto. Agora que você já conhece o Filipe Deschamps deve ta com a aquela sensação maluca que ele consegue injetar na sua mente. Sim, aquela coisa de “cara!! eu preciso me mexer !!” E esse projeto é o ideal para começar.
Requisitos :
  • 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