color picker

picking colors through buttons

HTML

<main>
</main>
<div class="pickers">
  <div class="pick one" onclick="btOne()"></div>
  <div class="pick two" onclick="btTwo()"></div>
  <div class="pick three" onclick="btThree()"></div>
  <div class="pick four" onclick="btFour()"></div>
  <div class="pick five" onclick="btFive()"></div>
  <div class="pick six" onclick="btSix()"></div>
  <div class="pick seven" onclick="btSeven()"></div>
</div>

CSS

main {
  background-color: pink;
  margin: 0 auto;
  width: 50vw;
  height: 50vw;
}

.pickers {
  margin: 2.5vw auto 0;
  width: 50vw;
  display: flex;
  justify-content: space-between;
}

.pickers .pick {
  width: 5vw;
  height: 5vw;
  border: 0.6vw solid pink;
}

.pickers .pick:hover {
  cursor: pointer;
  width: 5vw;
  height: 5vw;
  border: 0.6vw solid white;
  transition: border 0.5s ease;
}

.one {
  background-color: #F44336;
}

.two {
  background-color: #E91E63;
}

.three {
  background-color: #9C27B0;
}

.four {
  background-color: #673AB7;
}

.five {
  background-color: #3F51B5;
}

.six {
  background-color: #2196F3;
}

.seven {
  background-color: #009688;
}

JavaScript

var myCanvas = document.querySelector('main');

window.btOne = function() {
  myCanvas.classList.toggle("one");
};

window.btTwo = function() {
  myCanvas.classList.toggle("two");
};

window.btThree = function() {
  myCanvas.classList.toggle("three");
};

window.btFour = function() {
  myCanvas.classList.toggle("four");
};

window.btFive = function() {
  myCanvas.classList.toggle("five");
};

window.btSix = function() {
  myCanvas.classList.toggle("six");
};

window.btSeven = function() {
  myCanvas.classList.toggle("seven");
};