color-picker

color-picker.markdown

color-picker

A Pen by Makesh on CodePen.

License.

index.html

<div class="container">
  <!--Boxes-->
  <div class="board">
    <div class="box" id="box1"></div>
    <div class="box" id="box2"></div>
    <div class="box" id="box3"></div>
    <div class="box" id="box4"></div>
    <div class="box" id="box5"></div>
    <div class="box" id="box6"></div>
    <div class="box" id="box7"></div>
    <div class="box" id="box8"></div>
    <div class="box" id="box9"></div>
    <div class="box" id="box10"></div>
    <div class="box" id="box11"></div>
    <div class="box" id="box12"></div>
    <div class="box" id="box13"></div>
    <div class="box" id="box14"></div>
    <div class="box" id="box15"></div>
    <div class="box" id="box16"></div>
    <div class="box" id="box17"></div>
    <div class="box" id="box18"></div>
    <div class="box" id="box19"></div>
    <div class="box" id="box20"></div>
    <div class="box" id="box21"></div>
    <div class="box" id="box22"></div>
    <div class="box" id="box23"></div>
    <div class="box" id="box24"></div>
    <div class="box" id="box25"></div>
    <div class="box" id="box26"></div>
    <div class="box" id="box27"></div>
    <div class="box" id="box28"></div>
    <div class="box" id="box29"></div>
    <div class="box" id="box30"></div>
    <div class="box" id="box31"></div>
    <div class="box" id="box32"></div>
    <div class="box" id="box33"></div>
    <div class="box" id="box34"></div>
    <div class="box" id="box35"></div>
    <div class="box" id="box36"></div>
  </div>
  <!--Color selecter-->
  <div class="selecter">
    <div class="color red"></div>
    <div class="color blue"></div>
    <div class="color green"></div>
    <div class="color yellow"></div>
    <div class="color pink"></div>
    <div class="color orange"></div>
    <div class="color black"></div>
    <div class="color violet"></div>
    <div class="color skyblue"></div>
    <div class="color grey"></div>
  </div>
  <div class="reset-btn">
    <button onclick="reset()">Reset</button>
  </div>
</div>

script.js

let selectedColor = "";
let colors = document.querySelectorAll(".color");
let boxes = document.querySelectorAll(".box");

colors.forEach((element) => {
  element.addEventListener("click", () => {
    this.selectedColor = element.className.substring(5);
  });
});

boxes.forEach((element) => {
  element.addEventListener("click", () => {
    element.style.background = this.selectedColor;
  });
});

function reset() {
  boxes.forEach((element) => {
    element.style.removeProperty("background");
  });
}

style.css

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 10%;
}

.board {
  width: 300px;
  height: 300px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.selecter {
  margin-top: 10px;
  width: 300px;
  height: 25px;
  display: flex;
  gap: 5px;
}

.color {
  height: 25px;
  width: 25px;
  cursor: pointer;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.green {
  background: green;
}

.yellow {
  background: yellow;
}

.pink {
  background: pink;
}

.orange {
  background: orange;
}

.black {
  background: black;
}

.violet {
  background: violet;
}

.skyblue {
  background: skyblue;
}

.grey {
  background: grey;
}

.box {
  height: 25px;
  width: 25px;
  cursor: pointer;
  border: 1px solid black;
  margin: 10px;
}

.reset-btn {
  margin-top: 20px;
}