Skip to content

Commit 1f738d8

Browse files
m4rcos-devm4rcos-dev
committed
Refatorando projeto pixel art no portifólio
1 parent fc380ec commit 1f738d8

File tree

4 files changed

+246
-0
lines changed

4 files changed

+246
-0
lines changed

‎trybe-projetos/pixels-art/README.md‎

Whitespace-only changes.

‎trybe-projetos/pixels-art/index.html‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Document</title>
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
12+
<body>
13+
<h1 id="title">Paleta de Cores</h1>
14+
15+
<div id="color-palette">
16+
<div class="color color-black border horizontal size selected"></div>
17+
<div class="color color-red border horizontal size"></div>
18+
<div class="color color-blue border horizontal size"></div>
19+
<div class="color color-green border horizontal size"></div>
20+
</div>
21+
22+
<button id="clear-board">Limpar</button>
23+
<input id="board-size" type="number" min="1" oninput="validity.valid ? this.save = value : value = this.save;">
24+
<button id="generate-board">VQV</button>
25+
26+
<div id="pixel-board">
27+
28+
<div id="board1" class="line newLine">
29+
<div class="pixel color-white size border horizontal"></div>
30+
<div class="pixel color-white size border horizontal"></div>
31+
<div class="pixel color-white size border horizontal"></div>
32+
<div class="pixel color-white size border horizontal"></div>
33+
<div class="pixel color-white size border horizontal"></div>
34+
</div>
35+
36+
<div id="board2" class="line newLine">
37+
<div class="pixel color-white size border horizontal"></div>
38+
<div class="pixel color-white size border horizontal"></div>
39+
<div class="pixel color-white size border horizontal"></div>
40+
<div class="pixel color-white size border horizontal"></div>
41+
<div class="pixel color-white size border horizontal"></div>
42+
</div>
43+
44+
<div id="board3" class="line newLine">
45+
<div class="pixel color-white size border horizontal"></div>
46+
<div class="pixel color-white size border horizontal"></div>
47+
<div class="pixel color-white size border horizontal"></div>
48+
<div class="pixel color-white size border horizontal"></div>
49+
<div class="pixel color-white size border horizontal"></div>
50+
</div>
51+
52+
<div id="board4" class="line newLine">
53+
<div class="pixel color-white size border horizontal"></div>
54+
<div class="pixel color-white size border horizontal"></div>
55+
<div class="pixel color-white size border horizontal"></div>
56+
<div class="pixel color-white size border horizontal"></div>
57+
<div class="pixel color-white size border horizontal"></div>
58+
</div>
59+
60+
<div id="board5" class="line newLine">
61+
<div class="pixel color-white size border horizontal"></div>
62+
<div class="pixel color-white size border horizontal"></div>
63+
<div class="pixel color-white size border horizontal"></div>
64+
<div class="pixel color-white size border horizontal"></div>
65+
<div class="pixel color-white size border horizontal"></div>
66+
</div>
67+
68+
69+
</div>
70+
<script src="script.js"></script>
71+
</body>
72+
73+
</html>

‎trybe-projetos/pixels-art/script.js‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
//SELEÇÃO DO HTML.
2+
let selected = document.getElementsByClassName('selected')[0].classList[1];
3+
let colorStore = 'background-color: rgb(0, 0, 0)';
4+
5+
const title = document.getElementById('title');
6+
7+
const colorPalette = document.getElementById('color-palette');
8+
let colorRed = document.getElementsByClassName('color-red');
9+
let colorBlue = document.getElementsByClassName('color-blue');
10+
let colorGreen = document.getElementsByClassName('color-green');
11+
let color = document.getElementsByClassName('color');
12+
13+
const clearBoard = document.getElementById('clear-board');
14+
const imputBoardSize = document.getElementById('board-size');
15+
const buttonGenerateBoard = document.getElementById('generate-board');
16+
17+
18+
let pixelBoard = document.getElementById('pixel-board');
19+
let line = document.getElementsByClassName('line');
20+
const board1 = document.getElementsByClassName('board1');
21+
const board2 = document.getElementsByClassName('board2');
22+
const board3 = document.getElementsByClassName('board3');
23+
const board4 = document.getElementsByClassName('board4');
24+
const board5 = document.getElementsByClassName('board5');
25+
let pixel = document.getElementsByClassName('pixel');
26+
27+
//INICIA COM BACKGROUND-COLOR: BLACK;
28+
function colorize(paint) {
29+
let aux = paint.classList[1];
30+
paint.classList.replace(aux, selected);
31+
}
32+
33+
pixelBoard.addEventListener('click', function (event) {
34+
colorize(event.target);
35+
// console.log(event.target); //TESTAR SELEÇÃO
36+
})
37+
38+
//GERA CORES ALETORIAS NA PALETA DE CORES.
39+
function generateColor() {
40+
41+
const letters = '0123456789ABCDEF';
42+
let color = '#';
43+
44+
for (let e = 0; e < 6; e += 1) {
45+
color += letters[Math.floor(Math.random() * 16)];
46+
}
47+
48+
return color;
49+
50+
}
51+
52+
for (let f = 1; f < color.length; f += 1){
53+
let capatAux = 'background-color: ' + generateColor();
54+
color[f].setAttribute('style', capatAux);
55+
}
56+
57+
58+
//SELECIONA COR NA PALETA.
59+
function colorSelect(selection) {
60+
for (let i = 0; i < color.length; i += 1) {
61+
color[i].classList.remove('selected');
62+
if (selection === color[i]) {
63+
selection.classList.toggle('selected');
64+
selected = document.getElementsByClassName('selected')[0].classList[1];
65+
}
66+
}
67+
}
68+
69+
colorPalette.addEventListener('click', function (event) {
70+
let teste = window.getComputedStyle(event.target);
71+
let teste2 = teste.getPropertyValue('background-color');
72+
colorStore = teste2;
73+
colorSelect(event.target);
74+
console.log(colorStore);
75+
// console.log(color); //TESTAR SELEÇÃO
76+
// console.log(selected); //TESTAR SELEÇÃO
77+
})
78+
79+
//COLORE PIXEL.
80+
function colorize2(paint) {
81+
// let aux = window.getComputedStyle(paint);
82+
// let aux2 = aux.getPropertyValue('background-color');
83+
// paint.setAttribute('style', 'background-color' + aux2)
84+
// let aux = paint.classList[1];
85+
paint.setAttribute('style', 'background-color: ' + colorStore);
86+
}
87+
88+
pixelBoard.addEventListener('click', function (event) {
89+
colorize2(event.target);
90+
// console.log(event.target); //TESTAR SELEÇÃO
91+
})
92+
93+
//LIMPA PIXELS.
94+
clearBoard.addEventListener('click', function () {
95+
location.reload();
96+
});
97+
98+
//MUNDA QUANTIDADE DE PIXEL PARA PINTAR.
99+
function sizeBoard() {
100+
let imputValue = imputBoardSize.value;
101+
if (imputValue < 5) {
102+
imputValue = 5;
103+
} else if (imputValue > 50) {
104+
imputValue = 50;
105+
}
106+
for (let c = 0; c < imputValue; c += 1) {
107+
let newLine = document.createElement('div');
108+
newLine.id = 'board' + c;
109+
newLine.className = 'newLine';
110+
pixelBoard.appendChild(newLine);
111+
for (let d = 0; d < imputValue; d += 1) {
112+
let newColun = document.createElement('div');
113+
newColun.className = 'pixel color-white size border horizontal';
114+
let aux = document.getElementById('board' + c);
115+
aux.appendChild(newColun);
116+
}
117+
}
118+
119+
}
120+
// console.log(pixelBoard); //TESTAR TAMANHO.
121+
122+
123+
buttonGenerateBoard.addEventListener('click', function () {
124+
if (imputBoardSize.value === '') {
125+
alert('Board inválido!');
126+
} else {
127+
pixelBoard.innerHTML = '';
128+
sizeBoard();
129+
}
130+
})
131+

‎trybe-projetos/pixels-art/style.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/* CORES */
2+
3+
.color-black {
4+
background-color: black;
5+
}
6+
7+
.color-red {
8+
background-color: red;
9+
}
10+
11+
.color-blue {
12+
background-color: blue;
13+
}
14+
15+
.color-green {
16+
background-color: green;
17+
}
18+
19+
.color-white {
20+
background-color: white;
21+
}
22+
23+
/* BORDAS */
24+
.border {
25+
border: solid 1px;
26+
}
27+
28+
/* TAMANHOS */
29+
.size-mainboard {
30+
width: 25px;
31+
}
32+
33+
.size {
34+
width: 40px;
35+
height: 40px;
36+
}
37+
38+
/* POSICIONAMENTO */
39+
40+
.horizontal {
41+
display: inline-block;
42+
}

0 commit comments

Comments
 (0)