sigonasr2/pixel-art-maker
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

pallete done

Browse Source
This commit is contained in:
Rup Chitrak 2018-06-12 09:42:16 +05:30
parent 711d1e176a
commit 73b95ca6b5
3 changed files with 242 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -4,5 +4,6 @@
<link rel="stylesheet" href="style.css">
<script defer type="module" src="index.js"></script>
</head>
<body></body>
<body>
</body>
</html>

26
index.js
View File

@ -3,31 +3,41 @@
let main = document.createElement('div');
main.className = 'divContainer';
document.body.appendChild(main);
let className;
for(let i=0;i<20;i++) {
for(let i=0;i<50;i++) {
const rowDiv=document.createElement('div');
rowDiv.className = 'rowDivContainer';
main.appendChild(rowDiv);
for(let j=0;j<20;j++) {
for(let j=0;j<50;j++) {
const div=document.createElement('div');
//div.innerHTML = 'red';
div.className='divElem';
div.addEventListener("click",(e)=>{
e.target.className='colorChange';
console.log('e------->',e.target.innerHTML);
if(typeof className !=='undefined'){
e.target.className=className;
e.target.style="border-radius:0"
}
});
rowDiv.appendChild(div);
}
}
const colorArray=['red','blue','green','black','purple','aqua','pink','lightcoral','gold',
'brown','blueviolet','olivedrab','blanchedalmond','darkorange','yellow','plum','cadetblue',
'paleturquoise','tomato','turquoise','peachpuff','silver','lightseagreen','slateblue',
'lavender','greenyellow','rebeccapurple'];
let palette = document.createElement('div');
palette.className = 'Pal';
document.body.appendChild(palette);
for(let i=0;i<2;i++) {
for(let i=0;i<33;i++) {
const color = document.createElement('div');
color.className = 'palColor'+i;
//color.style="background-color: blue"
palette.appendChild(color);
// div.addEventListener("click",(e)=>{
// e.target.
// })
color.addEventListener("click",(e)=>{
className = e.target.className;
})
}

234
style.css
View File

@ -4,40 +4,250 @@
}
.rowDivContainer{
display: flex;
border: 1px solid green;
border: 1px solid grey;
width: 500px;
justify-content: space-around;
justify-content: flex-start;
}
.divElem{
height: 30px;
width: 30px;
border: 1px solid green;
height: 13px;
width: 13px;
border: 1px solid grey;
}
.colorChange{
background-color: red;
border: 1px solid green;
height: 30px;
width: 30px;
border: 1px solid grey;
height: 13px;
width: 13px;
}
.Pal{
display: flex;
flex-flow: wrap;
width: 500px;
}
.palColor0{
display: flex;
height: 30px;
width: 30px;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: red;
border-radius: 50%;
}
.palColor1{
display: flex;
height: 30px;
width: 30px;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: blue;
border-radius: 50%;
}
.palColor2{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: green;
border-radius: 50%;
}
.palColor3{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: black;
border-radius: 50%;
}
.palColor4{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: purple;
border-radius: 50%;
}
.palColor5{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: aqua;
border-radius: 50%;
}
.palColor6{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: pink;
border-radius: 50%;
}
.palColor7{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: lightcoral;
border-radius: 50%;
}
.palColor8 {
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: gold;
border-radius: 50%;
}
.palColor9{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: brown;
border-radius: 50%;
}
.palColor10{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: blueviolet;
border-radius: 50%;
}
.palColor11{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: olivedrab;
border-radius: 50%;
}
.palColor12{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: blanchedalmond;
border-radius: 50%;
}
.palColor13{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: darkorange;
border-radius: 50%;
}
.palColor14{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: yellow;
border-radius: 50%;
}
.palColor15{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: plum;
border-radius: 50%;
}
.palColor16{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: cadetblue;
border-radius: 50%;
}
.palColor17{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: paleturquoise;
border-radius: 50%;
}
.palColor18{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: tomato;
border-radius: 50%;
}
.palColor19{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: turquoise;
border-radius: 50%;
}
.palColor20{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: peachpuff;
border-radius: 50%;
}
.palColor21{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: silver;
border-radius: 50%;
}
.palColor22{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: lightseagreen;
border-radius: 50%;
}
.palColor23{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: slateblue;
border-radius: 50%;
}
.palColor24{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: lavender;
border-radius: 50%;
}
.palColor25{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: greenyellow;
border-radius: 50%;
}
.palColor26{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: rebeccapurple;
border-radius: 50%;
}