Skip to content

Commit

Permalink
removed unnecessary div, js code to add palette, circle, hexcode
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sagar-Sharma-7
Sagar-Sharma-7 committed Mar 18, 2023
1 parent 24489cb commit 96cdfd6
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 249 deletions.
281 changes: 33 additions & 248 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,265 +16,50 @@
<div class="container">
<div class="box">
<h3>Jazzy Purple</h3>
<div class="palette_box">
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
<div class="palette_box"></div>
</div>

<div class="box">
<h3>Jazzy Orange</h3>
<div class="palette_box">

</div>
</div>

<div class="box">
<h3>Jazzy Orange</h3>
<h3>Jazzy Blue</h3>
<div class="palette_box">
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>

</div>
</div>

<div class="box">
<h3>Jazzy Blue</h3>
<div class="palette_box">
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
</div>
<div class="box">
<h3>Jazzy Green</h3>
<div class="palette_box">

</div>
</div>

<div class="box">
<h3>Jazzy Green</h3>
<div class="palette_box">
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
</div>
<div class="box">
<h3>Jazzy Turquoise</h3>
<div class="palette_box">

</div>
</div>

<div class="box">
<h3>Jazzy Turquoise</h3>
<div class="palette_box">
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
</div>
</div>
<div class="box">
<h3>Jazzy Red</h3>
<div class="palette_box">
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
</div>
</div>
<div class="box">
<h3>Jazzy Red</h3>
<div class="palette_box">

</div>
</div>

<div class="box">
<h3>Jazzy Pink</h3>
<div class="palette_box">
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
<div class="palette">
<div class="circle"></div>
<p class="hexcode"></p>
</div>
</div>
</div>
<div class="box">
<h3>Jazzy Pink</h3>
<div class="palette_box">

</div>
</div>



Expand Down
28 changes: 27 additions & 1 deletion public/js/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,33 @@
// const palette = document.querySelectorAll(".palette");
// const circle = document.querySelectorAll(".circle");
const palette_box = document.querySelectorAll(".palette_box");

// creating palette
palette_box.forEach(item => {
// creating eight palette in each palette_box
let x = 0;
for(;x < 8; x++){
const palette = document.createElement("div");
palette.classList.add('palette');
item.appendChild(palette);
}
});
const palette = document.querySelectorAll(".palette");

// creating circle and hexcode paragraph
palette.forEach(item => {
const circle = document.createElement("div");
const hexcode = document.createElement("p")
circle.classList.add("circle");
hexcode.classList.add("hexcode");
item.appendChild(circle);
item.appendChild(hexcode);
});
const circle = document.querySelectorAll(".circle");
const hexcode = document.querySelectorAll(".hexcode");



const colorList = [
'#9100B5',
'#B000DC',
Expand Down Expand Up @@ -60,7 +85,8 @@ const colorList = [
'#FF5472',
'#FD627D',
'#FB738B',
]
];


let n = circle.length;
let i;
Expand Down

0 comments on commit 96cdfd6

Please sign in to comment.