Gerador de Flexbox

Aplicação criada para demonstrar o comportamento de um flex-container, através da alteração de suas propriedades. A tela é dividida em duas partes (horizontalmente, no desktop, e verticalmente, nas telas menores), sendo metade para um "controller", onde você pode alterar as propriedades do container através dos respectivos 'select', e a outra para um preview do container e o código CSS gerado pelo controller.

Gerador de Flexbox

descrição do projeto

Criado com: ReactJS / Create React App. React HTML Parser, para exibir o código CSS com quebra de linha. E muuuuuito Flexbox <3 . Criado com 'create-react-app', pode ser executada e enviada para a produção com os scripts padrão, descritos no README da pasta, no repositório do desafio. No controller, cada 'select' altera (através da 'onChange') uma propriedade (aplicada com spread operator) a um objeto armazenado em um estado (criado com 'useState') em sintaxe JavaScript. Esses estilos são aplicados ao container do preview através de sua propriedade 'style'. Esse objeto é percorrido, dentro de um hook de efeito, e retorna um array com as propriedades (que são reescritas de camelCase para kebab-case, através do método 'replace()') e seus valores, quando não forem padrão, concatenando os textos no formato CSS, que é impresso na tela, com quebra de linha, utilizando o React HTML Parser.

Visite a página do projeto

Bora lá!

Bora lá!

Voltar

Voltar