Untitled

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Make a Color Picker</title>

    <link rel="stylesheet" href="main.css" media="screen" charset="utf-8">
  <style id="jsbin-css">
h1, h2, h3, h4 {
  font-family: Monospace;
}

button {
  min-width: 3em;
  min-height: 3em;
  border-radius: 1.5em;
}

.red {
  background-color: red;
}

.orange {
  background-color: orange;
}

.yellow {
  background-color: yellow;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.indigo {
  background-color: indigo;
}

.violet {
  background-color: violet;
}

.text-aqua {
  background-color: aqua;
}

.text-chartreuse {
  background-color: chartreuse;
}

.text-coral {
  background-color: coral;
}

.text-darkmagenta {
  background-color: darkmagenta;
}

.text-yellowgreen {
  background-color: yellowgreen;
}

.text-plum {
  background-color: plum;
}

.text-tomato {
  background-color: tomato;
}

.color1 {
  background-color: #fbefcc;
}

.color2 {
  background-color: #f9ccac;
}

.color3 {
  background-color: #f4a688;
}

.color4 {
  background-color: #e0876a;
}

.color5 {
  background-color: #d9ad7c;
}

.color6 {
  background-color: #a2836e;
}

.color7 {
  background-color: #674d3c;
}
</style>
</head>
  <body>
    <h1>Welcome to My Color Picker!</h1>
    <br>
    <h2>Change the background color:</h2>
    <div id="color-picker">
      <button class="red" onclick="setColor('red');"></button>
      <button class="orange" onclick="setColor('orange');"></button>
      <button class="yellow" onclick="setColor('yellow');"></button>
      <button class="green" onclick="setColor('green');"></button>
      <button class="blue" onclick="setColor('blue');"></button>
      <button class="indigo" onclick="setColor('indigo');"></button>
      <button class="violet" onclick="setColor('violet');"></button>
    </div>
    <br>
    <h3>Change the text color:</h3>
    <div id="text-color">
      <button class="text-aqua" onclick="setTextColor('aqua');"></button>
      <button class="text-chartreuse" onclick="setTextColor('chartreuse');"></button>
      <button class="text-coral" onclick="setTextColor('coral');"></button>
      <button class="text-darkmagenta" onclick="setTextColor('darkmagenta');"></button>
      <button class="text-yellowgreen" onclick="setTextColor('yellowgreen');"></button>
      <button class="text-plum" onclick="setTextColor('plum');"></button>
      <button class="text-tomato" onclick="setTextColor('tomato');"></button>
    </div>
    <h4>Harmonious Palette</h4>
    <div id="new-color-picker">
      <button class="color1" onclick="setColor('#fbefcc');"></button>
      <button class="color2" onclick="setColor('#f9ccac');"></button>
      <button class="color3" onclick="setColor('#f4a688');"></button>
      <button class="color4" onclick="setColor('#e0876a');"></button>
      <button class="color5" onclick="setColor('#d9ad7c');"></button>
      <button class="color6" onclick="setColor('#a2836e');"></button>
      <button class="color7" onclick="setColor('#674d3c');"></button>
    </div>
  <script id="jsbin-javascript">
function setColor(bgcolor){
  var body = document.querySelector("body");
  body.style.background = bgcolor;
}

function setTextColor(textcolor){
  var text = document.querySelector("body");
  text.style.color = textcolor;
}
</script>


<script id="jsbin-source-css" type="text/css">h1, h2, h3, h4 {
  font-family: Monospace;
}

button {
  min-width: 3em;
  min-height: 3em;
  border-radius: 1.5em;
}

.red {
  background-color: red;
}

.orange {
  background-color: orange;
}

.yellow {
  background-color: yellow;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.indigo {
  background-color: indigo;
}

.violet {
  background-color: violet;
}

.text-aqua {
  background-color: aqua;
}

.text-chartreuse {
  background-color: chartreuse;
}

.text-coral {
  background-color: coral;
}

.text-darkmagenta {
  background-color: darkmagenta;
}

.text-yellowgreen {
  background-color: yellowgreen;
}

.text-plum {
  background-color: plum;
}

.text-tomato {
  background-color: tomato;
}

.color1 {
  background-color: #fbefcc;
}

.color2 {
  background-color: #f9ccac;
}

.color3 {
  background-color: #f4a688;
}

.color4 {
  background-color: #e0876a;
}

.color5 {
  background-color: #d9ad7c;
}

.color6 {
  background-color: #a2836e;
}

.color7 {
  background-color: #674d3c;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">function setColor(bgcolor){
  var body = document.querySelector("body");
  body.style.background = bgcolor;
}

function setTextColor(textcolor){
  var text = document.querySelector("body");
  text.style.color = textcolor;
}

</script></body>

  <script type="text/javascript" src="script.js"></script>
</html>