html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>///</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="home">
<h1 class="p-art">Pixel ART</h1>
</div>
<div class="canvas" id="content"></div>
<div class="console">
<input class="inp"
id="r1"
type="range"
max="255"
value="0">
<input class="inp"
id="r2"
type="range"
max="255"
value="0">
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
* {
margin:0;
padding:0;
box-sizing:border-box;
}
.container {
display:flex;
justify-content:center;
margin-top:200px;
}
.home {
display:flex;
align-items:center;
width:100%;
height:60px;
background-color:rgb(20, 20, 60);
border-radius:0 0 10px 10px;
position:absolute;
top:0;
}
.p-art {
color:white;
margin-left:20px;
font-weight:100;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
window.onload = () => {
const content = document.getElementById("content");
for (let i = 0; i <= 527; i++) {
const pix = document.createElement("div");
content.appendChild(pix);
pix.style.padding = "6px";
pix.style.border = "solid 1px #ddd";
pix.addEventListener("click", () => {
const r1 = document.getElementById("r1").value;
const r2 = document.getElementById("r2").value;
const r3 = document.getElementById("r3").value;
pix.style.background = `rgb(${r1},${r2},${r3})`;
pix.style.border = `solid 1px rgb(${r1},${r2},${r3})`;
});
}
};
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run