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"> <link rel="stylesheet" href="style.css">
<script defer type="module" src="index.js"></script> <script defer type="module" src="index.js"></script>
</head> </head>
<body></body> <body>
</body>
</html> </html>

26
index.js
View File

@ -3,31 +3,41 @@
let main = document.createElement('div'); let main = document.createElement('div');
main.className = 'divContainer'; main.className = 'divContainer';
document.body.appendChild(main); 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'); const rowDiv=document.createElement('div');
rowDiv.className = 'rowDivContainer'; rowDiv.className = 'rowDivContainer';
main.appendChild(rowDiv); main.appendChild(rowDiv);
for(let j=0;j<20;j++) { for(let j=0;j<50;j++) {
const div=document.createElement('div'); const div=document.createElement('div');
//div.innerHTML = 'red';
div.className='divElem'; div.className='divElem';
div.addEventListener("click",(e)=>{ div.addEventListener("click",(e)=>{
e.target.className='colorChange'; 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); 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'); let palette = document.createElement('div');
palette.className = 'Pal'; palette.className = 'Pal';
document.body.appendChild(palette); document.body.appendChild(palette);
for(let i=0;i<2;i++) { for(let i=0;i<33;i++) {
const color = document.createElement('div'); const color = document.createElement('div');
color.className = 'palColor'+i; color.className = 'palColor'+i;
//color.style="background-color: blue"
palette.appendChild(color); palette.appendChild(color);
// div.addEventListener("click",(e)=>{ color.addEventListener("click",(e)=>{
// e.target. className = e.target.className;
// }) })
} }

234
style.css
View File

@ -4,40 +4,250 @@
} }
.rowDivContainer{ .rowDivContainer{
display: flex; display: flex;
border: 1px solid green; border: 1px solid grey;
width: 500px; width: 500px;
justify-content: space-around; justify-content: flex-start;
} }
.divElem{ .divElem{
height: 30px; height: 13px;
width: 30px; width: 13px;
border: 1px solid green; border: 1px solid grey;
} }
.colorChange{ .colorChange{
background-color: red; background-color: red;
border: 1px solid green; border: 1px solid grey;
height: 30px; height: 13px;
width: 30px; width: 13px;
} }
.Pal{ .Pal{
display: flex; display: flex;
flex-flow: wrap;
width: 500px;
} }
.palColor0{ .palColor0{
display: flex; display: flex;
height: 30px; height: 13px;
width: 30px; width: 13px;
border: 1px solid black; border: 1px solid black;
background-color: red; background-color: red;
border-radius: 50%;
} }
.palColor1{ .palColor1{
display: flex; display: flex;
height: 30px; height: 13px;
width: 30px; width: 13px;
border: 1px solid black; border: 1px solid black;
background-color: blue; 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%;
} }