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>
<div class="pick out" onclick="btOut()"></div>

CSS

main {
  border: 2.5px dotted #D2D2D2;
  margin: 5vw auto 0;
  width: 50vw;
  height: 25vw;
}

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

.pick {
  width: 3vw;
  height: 3vw;
  border-radius: 50%;
}

.pick:hover {
  cursor: pointer;
}

.pick.out {
  border: 2.5px dotted #D2D2D2;
  position: relative;
  bottom: 3.1vw;
  left: 79vw;
}

.one {
  background-color: #F44336;
  border: 2.5px solid transparent;
}

.two {
  background-color: #E91E63;
  border: 2.5px solid transparent;
}

.three {
  background-color: #9C27B0;
  border: 2.5px solid transparent;
}

.four {
  background-color: #673AB7;
  border: 2.5px solid transparent;
}

.five {
  background-color: #3F51B5;
  border: 2.5px solid transparent;
}

.six {
  background-color: #2196F3;
  border: 2.5px solid transparent;
}

.seven {
  background-color: #009688;
  border: 2.5px solid transparent;
}

JavaScript

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

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

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

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

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

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

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

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

window.btOut = function() {
  myCanvas.className = " "
}

window.btOne = btOne;
window.btTwo = btTwo;
window.btThree = btThree;
window.btFour = btFour;
window.btFive = btFive;
window.btSix = btSix;
window.btSeven = btSeven;