Executando verificação de segurança...
2

Simples Troca de Cor de Fundo em JS

Olá como vai? Este é apenas um simples tutorial de como realizar uma simples troca de cor de fundo de uma página! ( no caso aqui como exemplo apenas a área de um quadrado que muda de forma também para ficar mais divertido! ), chega de falatório mãos a obra!!!
Primeiro vamos começar montando nossa estrutura do html, para colocarmos nossos elementos da página:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Muito bem, muito bem, nossa estrutura está criada! Eu costumo criar uma div dentro do body que será onde trabalharemos os elementos presentes dentro da div, para criarmos nossa área quadrada( que depois mudará de forma ) que terá sua cor de fundo sendo alterada pelo click de botões sendo cada um representando uma cor:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css"/>
    <title>Document</title>
</head>
<body>
    <!--Botões representando a alternância de cores em relação a área-->
    <button class="btn btnWhite">Branco</button>
    <button class="btn btnBlue">Azul</button>
    <button class="btn btnGreen">Verde</button>
    <button class="btn btnPink">Rosa</button>
    <!--Aárea de troca de cor-->
    <div class="quadrado" id="quadrado"></div>

    <!--Script com a função de troca de cor-->
    <script src="trocColor.js"></script>
</body>
</html>

Nossa estrutura padrão ficará assim, os botões recebendo uma classe com o mesmo nome para não ficarmos repetindo o estilo, e uma com nome diferente para podermos personalizá-los da forma que quisermos mudando um pouco sua estrutura. Juntamente com nosso script do JS criado( em um local separado ) onde irá conter nossa função que vai realizar a troca de cores. E também a criação do nosso modelo css para estilizar se a página - se não ficaria bem feio não é?
Bom agora antes de entrarmos de fato ao que interessa ( codificar o javascript para realizar a mudança de cores ), vamos ao estilo então:

body{
    background-color: black;
    align-items: center;
    justify-content: center;
    margin-left: 35%;
    margin-top: 5%;
}

.quadrado
{
    width: 500px;
    height: 500px;
    align-items: center;
    justify-content: center;
    background-color: white ;
    display: flex;
}

.btn 
{
    align-items: center;
    justify-content: center;    
    flex-direction: row;
    margin-bottom: 50px;
    margin-left: 4%;
    width: 60px;
    height: 30px;
    border-radius: 5px;
    background-color: transparent;
    color: white;
    border: 2px solid red;
    cursor: pointer;
    transition: 0.6s;
}

.btnWhite:hover
{
    border: 2px solid white;
    transition: 0.5s;
}

.btnBlue:hover
{
    border: 2px solid blue;
    transition: 0.5s;
}

.btnGreen:hover
{
    border: 2px solid lime;
    transition: 0.5s;
}

.btnPink:hover
{
    border: 2px solid #FF1493;
    transition: 0.5s;
}

Preferi deixar a página com a sua cor de fundo preta para um destaque maior na área que será trocada. Perceba que mesmo, colocando os elementos para se alinharem no centro( com o justfy-content e o align-item ) sendo obrigado a utilizar algumas margens para que isso possa ser feito. Em nossa área - que é um quadrado - definimos largura e altura com as tags de width ( para largura ) e height( para altura ), o alinhamos no centro e utilizamos um display para garantir que fique no centro, e escolhemos uma cor de fundo branca para ser possível vizulizar esse quadrado. É feito a estilização dos botões no geral, definidas larguras e altura, bem como a remoção de sua cor de fundo e a deixando transparente, para enseguida deixo as bordas vermelhas dando uma grossura de 1 para que seja possível vê-las. Em seguida, com o segundo nome que dei aos botões no inicio - lá na parte do html - atribui a eles cores próprias!! Cada um com a do respectivo nome. E para isso utilizo do hover( que é ativado quando o usuário passa o mouse por cima do botão ) e aplico uma transição para que a troca de cores tenha uma pequena animação um delay.
Após tudo isso feito vamos agora criar a função do JavaScript:

const quadrado = document.getElementById("quadrado");

Vamos lá! No arquivo separado que foi criado para o javaScript foi criado uma função e para ela foi passado um parâmetro que recebe o nome da cor a ser trocada - fica mais prático usar uma única função que troca cores do que várias ) e a constante criada pega o "Id" que criamos para a área que vamos mudar a cor, e assim vamos atribuir a ela e aos botões os efeitos para a troca de cores - e também a forma da área:

function trocarCor(cor) { 
   
   const quadrado = document.getElementById("quadrado");
    
    if (cor === "branco") {
        quadrado.style.backgroundColor = "#FFFFFF";
        quadrado.style.borderRadius = "0";
        quadrado.style.transition = "0.6s";
        quadrado.style.clipPath = "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)"; // Quadrado
    } 
    else if (cor === "azul") {
        quadrado.style.backgroundColor = "#0000FF";
        quadrado.style.clipPath = "polygon(0 0, 100% 0, 50% 100%)"; // Triângulo de ponta-cabeça
        quadrado.style.transition = "0.6s";
    } 
    else if (cor === "verde") {
        quadrado.style.backgroundColor = "#00FF00";
        quadrado.style.transition = "0.6s";
        quadrado.style.clipPath = "polygon(50% 0%, 100% 0%, 100% 100%)"; // Triângulo
    } 
    else if (cor === "rosa") {
        quadrado.style.backgroundColor = "#FF1493";
        quadrado.style.borderRadius = "0";
        quadrado.style.transition = "0.6s";
        quadrado.style.clipPath = "polygon(50% 0%, 29% 100%, 71% 100%)"; // Triângulo
    }
}

E pronto!! Nossa função está criada e mesmo no JS é possível ainda implementar estilos do CSS nele para facilitar as coisas, como o cliPath que é o responsável por realizar a troca da nossa forma inicial. Mas espera ai, você não pegou o "id" ( no caso as classes ) dos botões para trocar a cor! O que fazemos? Bem nossa função recebe um parâmetro então, basta apenas que quando eu chamar a função com nosso botão eu passe o nome de cada cor!

<button class="btn btnBlue" onclick="trocarCor('azul')">Azul</button>
<button class="btn btnGreen" onclick="trocarCor('verde')">Verde</button>
<button class="btn btnPink" onclick="trocarCor('rosa')">Rosa</button>

E pronto, assim nosso código está pronto e mostra de uma maneira simples como o JS pode ser uma arma maravilhosa em nossas criações web automatizando muita coisa! Bem esse é o nosso tutorial de hoje, caso haja dúvidas entrar em contato!! Até :D

Carregando publicação patrocinada...
1

Legal a ideia do tutorial, bem explicado. Como passo dois, eu sugeriria refatorar o codigo para tornar menos repetitivo, por exemplo:

  1. No css você repete o transition: 0.5s em todas as classes de hover dos botões, pode ficar apenas dentro da classe .btn
  2. Da mesma forma você atribui o transition para todas as cores no trocarCor(), pode atribuir via css para o id #quadrado
  3. Pode tornar o codigo menos repetitivo e mais customizavel (sem ter que mexer em js a cada cor nova) atribuindo um atributo data-color e lendo seu valor sempre que houver um clique. para não ter que repetir o onclick, faça um eventlistener em todas as classes btnColor por exemplo.
1

Ola!! muito obrigado pelas dicas, farei futuramente uma parte dois melhorando o código, nessa questão foi apenas uma versão simplificada, mas trarei algo mais e posteriormente outros tutoriais, mais avançados também!

1

Definir propriedades no HTML

Uma alternativa - como já sugerido - é inverter o controle. Em vez de deixar as regras no JavaScript, cada botão poderia indicar como ele deve ser. Para isso usamos o dataset de cada elemento. Por exemplo, o HTML ficaria assim:

<button class="btn btnWhite" data-background-color="#FFFFFF"
 data-border-radius="0" data-transition="0.6s" data-clip-path="polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)">
Branco
</button>
<button class="btn btnBlue" data-background-color="#0000FF"
 data-clip-path="polygon(0 0, 100% 0, 50% 100%)" data-transition="0.6s">
Azul
</button>
<button class="btn btnGreen" data-background-color="#00FF00"
 data-transition="0.6s" data-clip-path="polygon(50% 0%, 100% 0%, 100% 100%)">
Verde
</button>
<button class="btn btnPink" data-background-color="#FF1493"
 data-border-radius="0" data-transition="0.6s" data-clip-path="polygon(50% 0%, 29% 100%, 71% 100%)">
Rosa
</button>

<div class="quadrado" id="quadrado"></div>

Ou seja, cada botão indica os atriubutos que quer alterar. Depois, no JavaScript, basta pegarmos esses valores para mudar o style:

function trocarCor(event) {
  const botao = event.target; // botão que foi clicado
  const quadrado = document.getElementById("quadrado");

  // verifica todas as propriedades do dataset e muda no quadrado
  for (const [prop, valor] of Object.entries(botao.dataset)) {
    quadrado.style[prop] = valor;
  }
}

// para todos os botões com a classe "btn"
for (const button of document.querySelectorAll('button.btn')) {
  // chama a função trocarCor ao ser clicado
  button.addEventListener('click', trocarCor);
}

Um detalhe chato é que no HTML o nome tem que ser, por exemplo, data-background-color. Todo atributo cujo nome começa com data- fará parte do dataset. O detalhe é que o restante (no caso, background-color) resultará em backgroundColor no JavaScript (que é justamente o que precisamos).

Assim, se vc precisar de um novo botão que mude outras propriedades, basta acrescentá-las no dataset, sem precisar alterar o JavaScript.


Definir propriedades no CSS

Outra alternativa é definir essas propriedades no CSS. Ou seja, adicione uma classe para cada cor de quadrado:

.quadradoWhite {
    background-color: #FFFFFF;
    border-radius: 0;
    transition: 0.6s;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.quadradoBlue {
    background-color: #0000FF;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transition: 0.6s;
}
.quadradoGreen {
    background-color: #00FF00;
    transition: 0.6s;
    clip-path: polygon(50% 0%, 100% 0%, 100% 100%);
}
.quadradoPink {
    background-color: #FF1493;
    border-radius: 0;
    transition: 0.6s;
    clip-path: polygon(50% 0%, 29% 100%, 71% 100%);
}

No HTML vc acrescenta o name de cada botão:

<button class="btn btnWhite" name="White">Branco</button>
<button class="btn btnBlue" name="Blue">Azul</button>
<button class="btn btnGreen" name="Green">Verde</button>
<button class="btn btnPink" name="Pink">Rosa</button>
<div class="quadrado" id="quadrado"></div>

E no JavaScript, basta que o quadrado tenha a respectiva classe, que será quadrado + o nome do botão que foi clicado:

function trocarCor(event) {
  const botao = event.target; // botão que foi clicado
  const quadrado = document.getElementById("quadrado");
  // classe "quadrado" sempre tem
  // depois adiciona a classe da respectiva cor do botão que foi clicado
  quadrado.setAttribute('class', 'quadrado quadrado' + botao.name);
}

// para todos os botões com a classe "btn"
for (const button of document.querySelectorAll('button.btn')) {
  // chama a função trocarCor ao ser clicado
  button.addEventListener('click', trocarCor);
}
1

Muito massa o tutorial, até uma criança entenderia hahaha. Tenho uma sugestão pra refatorar a questão dos ifs, é bem simples na verdade.

Se liga:

`const quadrado = document.getElementById("quadrado"); // tornar a variável global

function trocarCor(cor) {
switch(cor) {
case 'branco':
quadrado.style.backgroundColor = "#FFFFFF";
quadrado.style.borderRadius = "0";
quadrado.style.transition = "0.6s";
quadrado.style.clipPath = "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)"; // Quadrado
break;
case 'azul':
quadrado.style.backgroundColor = "#0000FF";
quadrado.style.clipPath = "polygon(0 0, 100% 0, 50% 100%)"; // Triângulo de ponta-cabeça
quadrado.style.transition = "0.6s";
break;
case 'verde':
quadrado.style.backgroundColor = "#00FF00";
quadrado.style.transition = "0.6s";
quadrado.style.clipPath = "polygon(50% 0%, 100% 0%, 100% 100%)"; // Triângulo
break;

case 'rosa':
quadrado.style.backgroundColor = "#FFFFFF";
quadrado.style.borderRadius = "0";
quadrado.style.transition = "0.6s";
quadrado.style.clipPath = "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)";
break;

default: alert('Selecione qualquer cor!')
}`

Bem, tem refatorações melhores como as que comentaram hahaha, mas dependendo do contexto, acaba sendo melhor usar switch no lugar de if e elses, enfim, é só uma sugestão. Novamente, parabéns pelo tutorial!