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