Paleta de cores exadecimais:
Aprenda a criar um gerador de cores hexadecimais com este tutorial passo a passo. Descubra como usar HTML, CSS e JavaScript para fazer o Projeto.
Este projeto consiste em um gerador de cores "códigos" exadecimais, muito útil para quem está começando um projeto relacionado a programação.
Veja a Paleta de cores em funcionamento neste link Paleta de cores.
Veja o vídeo no YouTube:
Começando o Tutorial:
1° Passo: Abra seu VS Code, ou qualquer IDE da sua preferência e crie três pastas com os nomes... index.html, style.css e script.js.
Logo em seguida copie o código html abaixo e cole na pasta "index.html".
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paleta de Cores</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="container">
<h1>Paleta de Cores</h1>
<div class="colors"></div>
<button id="generate-button">Gerar nova paleta</button>
</div>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
body {
font-family: sans-serif;
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
}
h1 {
margin-bottom: 2rem;
text-align: center;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
}
.colors {
display: flex;
justify-content: center;
align-items: center;
}
.colors div {
width: 100px;
height: 100px;
margin: 0 10px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease-in-out;
position: relative;
}
.colors div p {
position: absolute;
top: 100px;
}
.colors div:hover {
transform: scale(1.1);
}
#generate-button {
background-color: #774caf;
border: none;
color: #fff;
text-align: center;
font-size: 1.2rem;
padding: 0.8rem 1.2rem;
cursor: pointer;
border-radius: 8px;
transition: all 0.3s;
margin: 3.5rem auto;
}
#generate-button:hover {
background-color: #6b30b8;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
3° Passo: Copie o código abaixo e cole na pasta "script.js".
const generateButton = document
.querySelector("#generate-button");
const colorsDiv = document
.querySelector(".colors");
generateButton.addEventListener(
"click", generateColors);
function generateColors() {
colorsDiv.innerHTML = "";
for (let i = 0; i < 5; i++) {
const color = generateRandomColor();
const colorDiv = document
.createElement("div");
colorDiv.style.backgroundColor =
color;
const colorName = document
.createElement("p");
colorName.innerText = color;
colorName.style.color = color;
colorDiv.appendChild(colorName);
colorsDiv.appendChild(colorDiv);
}
}
function generateRandomColor() {
const letters = "0123456789ABCDEF";
let color = "#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math
.random() * 16)];
}
return color;
}
As postagens do nosso blog te ajudaram?
Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando.
60% das doações são no valor de R$ 7,00
Antônio José do Carmo Nascimento
Comentários
Postar um comentário
Obrigado pelo seu feedback!