From 73b95ca6b53783ce4ccd93ae7c60eb1d47ebba80 Mon Sep 17 00:00:00 2001 From: Rup Chitrak Date: Tue, 12 Jun 2018 09:42:16 +0530 Subject: [PATCH] pallete done --- index.html | 3 +- index.js | 26 ++++-- style.css | 234 ++++++++++++++++++++++++++++++++++++++++++++++++++--- 3 files changed, 242 insertions(+), 21 deletions(-) diff --git a/index.html b/index.html index 50d168f..dbd74bd 100644 --- a/index.html +++ b/index.html @@ -4,5 +4,6 @@ - + + \ No newline at end of file diff --git a/index.js b/index.js index 0bcabf2..b431f64 100644 --- a/index.js +++ b/index.js @@ -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; + }) } diff --git a/style.css b/style.css index 1006453..0598b5c 100644 --- a/style.css +++ b/style.css @@ -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%; } \ No newline at end of file