Skip to content

Commit 70a6439

Browse files
m4rcos-devm4rcos-dev
authored
Merge pull request #1 from m4rcos-dev/projeto-pixels-art
Projeto pixels art
2 parents fc380ec + 9dfb3d2 commit 70a6439

File tree

7 files changed

+243
-0
lines changed

7 files changed

+243
-0
lines changed

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

Whitespace-only changes.

‎trybe-projetos/pixels-art/files/background.mp4‎

928 KB
Binary file not shown.

‎trybe-projetos/pixels-art/files/background.webm‎

1.71 MB
Binary file not shown.

‎trybe-projetos/pixels-art/files/backgroundImage.jpg‎

121 KB
Loading

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

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
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>PIXEL ART</title>
9+
<link rel="stylesheet" href="style.css">
10+
<link rel="preconnect" href="https://fonts.googleapis.com">
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12+
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
13+
</head>
14+
15+
<body>
16+
<video autoplay loop poster="files/backgroundImage.jpg" id="bg_video">
17+
<source src="files/background.webm" type="video/webm">
18+
<source src="files/background.mp4" type="video/mp4">
19+
</video>
20+
21+
<h1 id="title" class="main-font bg-title">PIXEL ART</h1>
22+
23+
<div id="setup">
24+
<div id="size" class="main-font horizontal">Escolha um tamanho:
25+
<input id="board-size" type="number" min="1"
26+
oninput="validity.valid ? this.save = value : value = this.save;" placeholder="Min: 5 Max: 30"
27+
class="main-font">
28+
<button id="generate-board" class="main-font">VQV!</button>
29+
</div>
30+
31+
<div id="color" class="main-font horizontal">Escolha uma cor:
32+
<input id="palette-color" class="horizontal main-font" type="color">
33+
<button id="select-color" class="main-font">VQV!</button>
34+
<button id="clear-board" class="main-font">Limpar</button>
35+
</div>
36+
</div>
37+
38+
<main id="main">
39+
<div id="pixel-board">
40+
41+
<div id="board1" class="line newLine">
42+
<div class="pixel color-white size border horizontal"></div>
43+
<div class="pixel color-white size border horizontal"></div>
44+
<div class="pixel color-white size border horizontal"></div>
45+
<div class="pixel color-white size border horizontal"></div>
46+
<div class="pixel color-white size border horizontal"></div>
47+
</div>
48+
49+
<div id="board2" class="line newLine">
50+
<div class="pixel color-white size border horizontal"></div>
51+
<div class="pixel color-white size border horizontal"></div>
52+
<div class="pixel color-white size border horizontal"></div>
53+
<div class="pixel color-white size border horizontal"></div>
54+
<div class="pixel color-white size border horizontal"></div>
55+
</div>
56+
57+
<div id="board3" class="line newLine">
58+
<div class="pixel color-white size border horizontal"></div>
59+
<div class="pixel color-white size border horizontal"></div>
60+
<div class="pixel color-white size border horizontal"></div>
61+
<div class="pixel color-white size border horizontal"></div>
62+
<div class="pixel color-white size border horizontal"></div>
63+
</div>
64+
65+
<div id="board4" class="line newLine">
66+
<div class="pixel color-white size border horizontal"></div>
67+
<div class="pixel color-white size border horizontal"></div>
68+
<div class="pixel color-white size border horizontal"></div>
69+
<div class="pixel color-white size border horizontal"></div>
70+
<div class="pixel color-white size border horizontal"></div>
71+
</div>
72+
73+
<div id="board5" class="line newLine">
74+
<div class="pixel color-white size border horizontal"></div>
75+
<div class="pixel color-white size border horizontal"></div>
76+
<div class="pixel color-white size border horizontal"></div>
77+
<div class="pixel color-white size border horizontal"></div>
78+
<div class="pixel color-white size border horizontal"></div>
79+
</div>
80+
</div>
81+
</main>
82+
83+
<footer>
84+
<H3 id="footer" class="main-font">Desenvolvido como projeto na <a href="https://www.betrybe.com/">TRYBE</a> por <a href="https://www.linkedin.com/in/dev-marcospaulo">Marcos Paulo</a>!</H3>
85+
</footer>
86+
<script src="script.js"></script>
87+
</body>
88+
89+
</html>

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
//SELEÇÃO HTML
2+
const imputBoardSize = document.getElementById('board-size');
3+
let pixelBoard = document.getElementById('pixel-board');
4+
const buttonGenerateBoard = document.getElementById('generate-board');
5+
let paletteColor = document.getElementById('palette-color');
6+
let colorStore = 'background-color: rgb(0, 0, 0)';
7+
const buttonSelectColor = document.getElementById('select-color');
8+
const clearBoard = document.getElementById('clear-board');
9+
10+
//MUNDA QUANTIDADE DE PIXEL PARA PINTAR.
11+
function sizeBoard() {
12+
let imputValue = imputBoardSize.value;
13+
if (imputValue < 5) {
14+
imputValue = 5;
15+
} else if (imputValue > 30) {
16+
imputValue = 30;
17+
}
18+
for (let c = 0; c < imputValue; c += 1) {
19+
let newLine = document.createElement('div');
20+
newLine.id = 'board' + c;
21+
newLine.className = 'newLine';
22+
pixelBoard.appendChild(newLine);
23+
for (let d = 0; d < imputValue; d += 1) {
24+
let newColun = document.createElement('div');
25+
newColun.className = 'pixel color-white size border horizontal';
26+
let aux = document.getElementById('board' + c);
27+
aux.appendChild(newColun);
28+
}
29+
}
30+
31+
}
32+
// console.log(pixelBoard); //TESTAR TAMANHO.
33+
34+
buttonGenerateBoard.addEventListener('click', function () {
35+
if (imputBoardSize.value === '') {
36+
alert('Tamanho inválido!');
37+
} else {
38+
pixelBoard.innerHTML = '';
39+
sizeBoard();
40+
}
41+
})
42+
43+
//SELECIONA COR
44+
buttonSelectColor.addEventListener('click', function(event){
45+
let aux = paletteColor.value
46+
colorStore = aux;
47+
console.log(aux);
48+
console.log(colorStore);
49+
})
50+
51+
//COLORE PIXEL
52+
function colorize2(paint) {
53+
paint.setAttribute('style', 'background-color: ' + colorStore,);
54+
}
55+
56+
pixelBoard.addEventListener('click', function (event) {
57+
colorize2(event.target);
58+
})
59+
60+
//LIMPAR TELA.
61+
clearBoard.addEventListener('click', function () {
62+
location.reload();
63+
});

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

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/* GERAL */
2+
#bg_video {
3+
position: fixed;
4+
right: 0;
5+
bottom: 0;
6+
min-width: 100%;
7+
min-height: 100%;
8+
width: auto;
9+
height: auto;
10+
z-index: -1000;
11+
background: url(files/backgroundImage.jpg) no-repeat;
12+
background-size: cover;
13+
}
14+
15+
.main-font {
16+
font-family: 'vt323', Arial, Helvetica, sans-serif;
17+
font-size: x-large;
18+
text-align: center;
19+
}
20+
21+
.horizontal {
22+
display: inline-block;
23+
}
24+
25+
/* TITLE */
26+
#title {
27+
text-align: center;
28+
font-size: 3em;
29+
background-color: rgb(169, 169, 169, 0.5);
30+
border-top-left-radius: 1em;
31+
border-top-right-radius: 1em;
32+
margin-bottom: 0.2em;
33+
margin-top: 0.2em;
34+
position: fixed;
35+
right: 1px;
36+
left: 1px;
37+
top: 3px;
38+
}
39+
40+
/* MAIN */
41+
#main {
42+
background-color: rgb(169, 169, 169, 0.5);
43+
border-radius: 1em;
44+
margin-top: 110px;
45+
right: 1px;
46+
left: 1px;
47+
}
48+
49+
/* SETUP */
50+
#setup {
51+
padding: 5px;
52+
margin-top: 3.6em;
53+
margin-bottom: -4px;
54+
background-color: rgb(169, 169, 169, 0.5);
55+
position: fixed;
56+
right: 1px;
57+
left: 1px;
58+
top: 3px;
59+
}
60+
61+
/* PIXEL BOARD */
62+
#pixel-board {
63+
padding: 10px;
64+
}
65+
66+
.color-white {
67+
background-color: white;
68+
}
69+
70+
.border {
71+
border: solid 1px;
72+
margin: -2px;
73+
}
74+
75+
.size {
76+
width: 40px;
77+
height: 40px;
78+
}
79+
80+
/* RODAPÉ */
81+
82+
#footer {
83+
position: fixed;
84+
bottom: 0;
85+
left: 0;
86+
right: 0;
87+
background-color: rgb(169, 169, 169, 0.5);
88+
margin: 0px;
89+
padding: 0px;
90+
text-decoration: none;
91+
}

0 commit comments

Comments
 (0)