Skip to content

Commit ee62c38

Browse files
author
btriz
committed
adiciona arquivos do projeto
0 parents  commit ee62c38

File tree

4 files changed

+335
-0
lines changed

4 files changed

+335
-0
lines changed

‎back.png

11.3 KB
Loading

‎index.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-BR">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Pixel Art</title>
6+
<link rel="stylesheet" href="style.css">
7+
<link rel="preconnect" href="https://fonts.gstatic.com">
8+
<link href="https://fonts.googleapis.com/css2?family=Bungee+Outline&family=VT323&display=swap" rel="stylesheet">
9+
</head>
10+
<body>
11+
<h1 id="hero-title">PIXEL ART</h1>
12+
<h1 id="title">Paleta de Cores</h1>
13+
14+
<div id="color-palette">
15+
</div>
16+
17+
<section>
18+
<div id="a">
19+
<input type="number" id="board-size" min="1" max="50">
20+
<button id="generate-board">VQV</button>
21+
</div>
22+
23+
<div id="b">
24+
<button id="random">Novas<br>Cores</button>
25+
<button id="clear-board">Limpar</button>
26+
</div>
27+
28+
</section>
29+
30+
<table id="pixel-board">
31+
</table>
32+
33+
<script src="script.js"></script>
34+
</body>
35+
</html>
36+

‎script.js

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
let size = 5;
2+
// COLORIR O QUADRO
3+
function paint(click) {
4+
const selected = document.querySelector('.selected');
5+
const color = window.getComputedStyle(selected, null).getPropertyValue('background-color');
6+
const px = click.target;
7+
px.style.backgroundColor = color;
8+
}
9+
10+
// CRIAR O QUADRO
11+
const board = document.getElementById('pixel-board');
12+
13+
function createPixelBoard() {
14+
for (let index = 0; index < size; index += 1) {
15+
const row = document.createElement('tr');
16+
17+
for (let index2 = 0; index2 < size; index2 += 1) {
18+
const pixel = document.createElement('td');
19+
pixel.classList.add('pixel');
20+
pixel.addEventListener('click', paint);
21+
row.appendChild(pixel);
22+
}
23+
board.appendChild(row);
24+
/* document.getElementById('board-size').value = linesNumber; */
25+
}
26+
}
27+
28+
const input = document.getElementById('board-size');
29+
30+
function createBoardButton() {
31+
size = input.value;
32+
33+
if (size < 5) {
34+
size = 5;
35+
alert('Opa!\nO menor número possível é 5!');
36+
createPixelBoard();
37+
/* document.getElementById('board-size').value = 5; */
38+
} else if (size > 50) {
39+
size = 50;
40+
alert('Opa!\nO maior número possível é 50!');
41+
createPixelBoard();
42+
/* document.getElementById('board-size').value = 50; */
43+
} else {
44+
createPixelBoard();
45+
}
46+
}
47+
48+
function validBoard() {
49+
if (input.value <= 0) {
50+
alert('Board inválido!');
51+
} else {
52+
while (board.children.length > 0) {
53+
board.removeChild(board.firstChild);
54+
console.log(board.children.length);
55+
}
56+
createBoardButton();
57+
}
58+
}
59+
60+
const createButton = document.getElementById('generate-board');
61+
createButton.addEventListener('click', validBoard);
62+
63+
// ENTER NO INPUT
64+
function enter(key) {
65+
if (key.keyCode === 13) {
66+
createButton.click();
67+
}
68+
}
69+
70+
input.addEventListener('keyup', enter);
71+
72+
// SELECIONAR CORES
73+
function selectColor(click) {
74+
if (click.target.classList.contains('selected')) {
75+
// empty
76+
} else {
77+
const deselect = document.querySelector('.selected');
78+
deselect.classList.remove('selected');
79+
click.target.classList.add('selected');
80+
}
81+
}
82+
83+
// GERAR NOVAS CORES
84+
const palette = document.getElementById('color-palette');
85+
86+
function createPalette() {
87+
const numberOfColors = 4;
88+
for (let index = 0; index < numberOfColors; index += 1) {
89+
const color = document.createElement('div');
90+
91+
color.classList.add('color');
92+
color.addEventListener('click', selectColor);
93+
palette.appendChild(color);
94+
}
95+
const black = palette.firstElementChild;
96+
black.style.backgroundColor = 'black';
97+
black.classList.add('selected');
98+
for (let index = 1; index < numberOfColors; index += 1) {
99+
const hue = Math.round(1000 * (Math.random() * 0.33));
100+
const saturation = '100%';
101+
const lightness = Math.round(100 * (Math.random() * (0.9 - 0.2) + 0.2));
102+
const newColor = `hsl(${hue}, ${saturation}, ${lightness}%`;
103+
palette.children[index].style.backgroundColor = newColor;
104+
}
105+
}
106+
107+
function paletteButton() {
108+
while (palette.children.length > 0) {
109+
palette.removeChild(palette.lastElementChild);
110+
}
111+
createPalette();
112+
}
113+
114+
const randomButton = document.getElementById('random');
115+
randomButton.addEventListener('click', paletteButton);
116+
117+
// ONLOAD
118+
window.addEventListener('load', createPalette);
119+
window.addEventListener('load', createPixelBoard);
120+
121+
// LIMPAR O QUADRO
122+
function limpar() {
123+
const px = document.getElementsByClassName('pixel');
124+
for (let index = 0; index < px.length; index += 1) {
125+
px[index].style.backgroundColor = 'white';
126+
}
127+
}
128+
129+
const clearButton = document.getElementById('clear-board');
130+
clearButton.addEventListener('click', limpar);

‎style.css

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
body {
2+
background-image: url('back.png');
3+
background-repeat: no-repeat;
4+
background-attachment: fixed;
5+
background-position: bottom;
6+
background-size: cover;
7+
margin: 50px 20px;
8+
}
9+
10+
h1 {
11+
margin: auto;
12+
max-width: max-content;
13+
text-align: center;
14+
}
15+
16+
#hero-title {
17+
font-family: Bungee Outline, monospace;
18+
font-size: 4em;
19+
color: white;
20+
}
21+
22+
#title {
23+
padding-top: 35px;
24+
color: rgba(255, 255, 255, 0.747);
25+
font-family: VT323, monospace;
26+
}
27+
28+
section {
29+
margin: 5px auto 20px;
30+
height: 60px;
31+
width: 330px;
32+
position: relative;
33+
}
34+
35+
#a {
36+
display: inline-block;
37+
width: 140px;
38+
position: absolute;
39+
top: 0;
40+
left: 0;
41+
}
42+
43+
#b {
44+
width: 190px;
45+
position: absolute;
46+
top: 0;
47+
right: 0;
48+
}
49+
50+
input {
51+
background-color: rgba(0, 0, 0, 0);
52+
border-radius: 30px 4px 4px 30px;
53+
color: white;
54+
font-family: VT323, monospace;
55+
font-size: 26px;
56+
height: 44px;
57+
padding-left: 20px;
58+
padding-right: 0;
59+
max-width: 45px;
60+
transition: 0.1s;
61+
}
62+
63+
input:hover , input:focus {
64+
box-shadow: 0 0 10px rgba(255, 255, 255, 0.486), inset 0 0 10px white;
65+
outline: none;
66+
}
67+
68+
input::selection {
69+
background-color: rgba(255, 255, 255, 0.295);
70+
}
71+
72+
table {
73+
box-shadow: 0 0 200px black;
74+
}
75+
76+
button {
77+
background-color: rgba(255, 255, 255, 0);
78+
border: 1px solid white;
79+
border-radius: 4px;
80+
color: white;
81+
font-family: VT323, monospace;
82+
font-size: 20px;
83+
height: 50px;
84+
line-height: 15px;
85+
margin-left: 20px;
86+
padding-left: 15px;
87+
padding-right: 15px;
88+
position: absolute;
89+
top: 0;
90+
transition: 0.1s;
91+
}
92+
93+
button:hover {
94+
box-shadow: 0 0 10px rgba(255, 255, 255, 0.486), inset 0 0 10px white;
95+
}
96+
97+
button:active {
98+
box-shadow: 0 0 13px white, inset 0 0 10px white;
99+
}
100+
101+
button:focus {
102+
outline: 0;
103+
}
104+
105+
#generate-board {
106+
right: 0;
107+
}
108+
109+
#random {
110+
left: 0;
111+
}
112+
113+
#clear-board {
114+
border-radius: 4px 30px 30px 4px;
115+
right: 0;
116+
}
117+
118+
#clear-board:hover {
119+
box-shadow: 0 0 10px rgba(255, 0, 106, 0.753), inset 0 0 18px rgba(255, 0, 106, 0.836);
120+
}
121+
122+
#clear-board:active {
123+
box-shadow: 0 0 15px rgb(253, 51, 135), inset 0 0 18px rgb(253, 38, 128);
124+
}
125+
126+
.color {
127+
border: 1px solid black;
128+
display: inline-block;
129+
height: 40px;
130+
width: 40px;
131+
transition: 0.1s linear;
132+
}
133+
134+
.color:hover {
135+
box-shadow: 0 0 10px rgba(255, 255, 255, 0.432);
136+
}
137+
138+
#color-palette {
139+
margin: 20px auto 0;
140+
height: 80px;
141+
max-width: max-content;
142+
}
143+
144+
#color-palette::selection {
145+
background-color: none;
146+
}
147+
148+
#pixel-board {
149+
border-collapse: collapse;
150+
margin-left: auto;
151+
margin-right: auto;
152+
}
153+
154+
.pixel {
155+
background-color: white;
156+
border: 1px solid black;
157+
height: 41px;
158+
width: 41px;
159+
}
160+
161+
.pixel:hover {
162+
box-shadow: inset 0 0 10px rgb(139, 139, 139);
163+
}
164+
165+
.selected {
166+
box-shadow: 0 0 1.7em white;
167+
margin-left: 20px;
168+
margin-right: 20px;
169+
}

0 commit comments

Comments
 (0)