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

pallete done

Browse Source
bangalore
Rup Chitrak 7 years ago
parent 711d1e176a
commit 73b95ca6b5
3 changed files with 242 additions and 21 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 3
      index.html
  2. 26
      index.js
  3. 234
      style.css

3
index.html
Unescape 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
Unescape 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
Unescape 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%;
} }
Write Preview
Loading…
Cancel
Save