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
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
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 🚀
A página está hospedada no Github Pages, aqui
