border_radius_generator

Tabela de conteúdos

Descrição do projeto
Status
Desenvolvimento
Resultado
Tecnologias Utilizadas
Author

📝Descrição do Projeto

Gerador de border radius online. O usuário pode colocar os valores de cada border radius, escolher a unidade de medida e visualizar o resultado na figura, além de copiar o código

🕗Status

Em andamento...🚀

[ ]Acessibilidade Web
[Ok] Botão de copiar para área de transferência
[Ok] Validar se a unidade de medida fornecida pelo usuário é válida
[ ]Validar se o valor do border radius fornecido pelo usuário é válido

💻Desenvolvimento

Em um primeiro momento foi desafiador, mas depois foi muito satisfatório ver minha evolução e também o que eu preciso melhorar principalmente em relação aos escopos do JS.

Eu tinha desenvolvido todo o código em JavaSript puro e apenas no escopo global, mas decidi dividir ele por módulos para retirar o acesso do usuário a maior parte da minha regra de negócio. O código ficou divido em três componentes: addCode.js, changeBorder.js e thisIsRem.js, além do arquivo main.js. No quesito CSS e HTML também trabalhei com eles puros e acredito que não tenha necessidade discorrer muito sobre, já que estão bem simples.

import addCode from './components/addCode.js'
import changeBorder from './components/changeBorder.js'
import thisIsRem from './components/thisIsRem.js' 

borderTopLeft.onkeyup = function changingBorder(){
    if(borderMeasure.value =='px' || borderMeasure.value=='pt' || borderMeasure.value=='cm' || borderMeasure.value=='mm' || borderMeasure.value=='pc' || borderMeasure.value=='em' || borderMeasure.value=='rem' || borderMeasure.value=='%' || borderMeasure.value=='ex' || borderMeasure.value=='ch' || borderMeasure.value=='vw' || borderMeasure.value=='vh'){
        changeBorder();
    } else{
        alert('Insira uma unidade de medida válida. Ex: rem, px, em, % ... ou insira valores positivos de border-radius');
    }
    console.log("rodou")
    addCode();
    thisIsRem()
};

No main.js eu importei os components — boa parte das variáveis e constantes eu declarei no escopo global, acredito que não seja a melhor forma, quero mudar isso em breve —usei o evento "onkeyup" para ativar uma função, no caso essa função testaria se o usuário digitou uma unidade de medida válida, depois chamaria o componente changeBorder

const changeBorder = () => {
        formExample.style.borderBottomLeftRadius = borderBottomLeft.value + borderMeasure.value;
        formExample.style.borderBottomRightRadius = borderBottomRight.value + borderMeasure.value;
        formExample.style.borderTopLeftRadius = borderTopLeft.value + borderMeasure.value;
        formExample.style.borderTopRightRadius = borderTopRight.value + borderMeasure.value;
}

export default changeBorder;

O componente changeBorder é responsável por mudar os valores do border radius de acordo com o valor que está no input e de acordo com a medida passada pelo usuário. Eu declarei uma arrow function e ela, quando chamada, deve mudar o valor de borde -radius do elemento "formExample", que é a figura. Por fim na última linha eu exportei o componente

Voltando para o arquivo main.js depois que changeBorder() for executada

import addCode from './components/addCode.js'
import changeBorder from './components/changeBorder.js'
import thisIsRem from './components/thisIsRem.js' 

borderTopLeft.onkeyup = function changingBorder(){
    if(borderMeasure.value =='px' || borderMeasure.value=='pt' || borderMeasure.value=='cm' || borderMeasure.value=='mm' || borderMeasure.value=='pc' || borderMeasure.value=='em' || borderMeasure.value=='rem' || borderMeasure.value=='%' || borderMeasure.value=='ex' || borderMeasure.value=='ch' || borderMeasure.value=='vw' || borderMeasure.value=='vh'){
        changeBorder();
    } else{
        alert('Insira uma unidade de medida válida. Ex: rem, px, em, % ... ou insira valores positivos de border-radius');
    }
    console.log("rodou")
    addCode();
    thisIsRem()
};

Voltando para o arquivo main.js depois que changeBorder(), caso aquela primeira condição não seja verdadeira irá entrar no bloco do else e irá aparecer um "alert" para o usuário advertindo para que ele use uma unidade de medida válida e alguns exemplos dessas. Depois do bloco do if/else as funções dos outros dois componentes serão executadas

Quando o addCode é chamado ele executa o seguinte código:

const addCode = () => {
    code.value = 'border-radius: ' +  document.getElementById('topLeft').value + borderMeasure.value + ' ' + document.getElementById('topRight').value + borderMeasure.value+ ' '+ document.getElementById('bottomLeft').value +borderMeasure.value+' ' + document.getElementById('topRight').value + borderMeasure.value + ';';
}

export default addCode;

Ele basicamente muda o valor do input que exibe o código da propriedade border radius para os valores capturados pelos inputs que pegam a unidade de medida e que pegam os valores

Depois do addCode() ser executado o próximo será o thisIsRem()

    const divCheck = document.getElementById('divCheck');
    let check = document.getElementById('forRem');
    const pageHtml = document.querySelector("html");

    if(borderMeasure.value != 'rem'){
        divCheck.classList.add("desactive");
    } else{
        divCheck.classList.remove("desactive");
    }

    if(borderMeasure.value == 'rem' && check.checked){
        pageHtml.style.fontSize = 62.5 + '%'
    }
}

export default thisIsRem;

Eu declarei o elemento checkbox e a div que ele está aninhado e também declarei a tag html, depois eu testei se a unidade de medida era difernte de 'rem', se fosse, a div receberia a class 'desactive' que mudaria a propriedade visibily dela para hidden, caso a unidade de medida fosse rem essa classe seria removida o que deixaria essa div visível e consequentemente o checkbox também

No segundo if eu verifico novamente se a unidade de medida é 'rem', mas eu também verifico se o checkbox está 'checked', se as duas condições forem verdade o font size da tag html será de 62.5%(eu acho isso muito útil para quando for usar rem)

As próximas linhas do arquivo main.js seguem essa mesma lógica todos os inputs que pegam borders radius. Apenas irei reforçar que a maior parte das variáveis está declarada no escopo global, assim como a função copyCode() que é acionada quando o usuário clica no botão de copiar.

Ainda há muito o que melhorar 🚀