<header>
  <h1>Etch a Sketch</h1>
</header>

<section>
  <div class="table"></div>
  
  <div class="buttons">
    <input id="size" type="number" value="16" placeholder="size" max="32" min="3">
    <span id="gradient" class="active">Gradient</span>
    <span id="random">Random</span>
    <span id="reset">Reset</span>
  </div>
</section>



<footer>
  Created by <a href="https://remybeumier.be" target="_blank">Rémy Beumier</a>
</footer>

* {
  padding: 0; margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial;
  min-height: 100vh;
  text-align: center;
  background: #03A9F4;
  background-image: linear-gradient(to bottom left, #03A9F4 10%, #673AB7 90%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

header {
  padding: 20px 10px;
  letter-spacing: 0.2em;
  color: #f5f5f5;
  width: 100%;
  text-align: center;
}

.table {
  margin: auto;
}

.table .box {
  float: left;
  border: 1px solid #333;
  border-radius: 2px;
  background: #f5f5f5;
}

.buttons {
  clear: both;
  padding: 10px;
}

.buttons span, #size {
  padding: 5px 10px;
  margin: auto 5px;
  border: 1px solid #f5f5f5;
  border-radius: 2px;
  color: #f5f5f5;
  transition: background .5s, color .5s;
  cursor: pointer;
  font-size: 13px;
  background: transparent;
}
.buttons span:hover, #size:hover, #size:focus, .active {
  background: #f5f5f5 !important;
  color: #333 !important;
}
#size {
  display: inline;
}

footer {
  padding: 5px;
  width: 100%;
  font-size: 14px;
  color: #f5f5f5;
}
footer a {
  color: #333;
  text-decoration: none;
}
footer a:hover {
  color: #f5f5f5;
  text-decoration: underline;
}

// turn Gradient/Random into a switch

var containerSide = "300px",
    type = "gradient",
    box = document.getElementsByClassName("box"),
    table = document.querySelector(".table"),
    gradient = document.querySelector("#gradient"),
    random = document.querySelector("#random"),
    reset = document.querySelector("#reset"),
    size = document.querySelector("#size"),
    boxSide = 16;

table.style.width = containerSide;

init();

// Event listeners 
reset.addEventListener("click", function() {
  resetGrid(size.value);
});

random.addEventListener("click", function() {
  type = "random";
  this.classList.add("active");
  gradient.classList.remove("active");
});

gradient.addEventListener("click", function() {
  type = "gradient";
  this.classList.add("active");
  random.classList.remove("active");
});

size.addEventListener("input", function(e) {
  if (e.target.value !== 16) {
    resetGrid(e.target.value);
  }
});

// init function
function init() {
  for(var i=0; i<boxSide*boxSide; i++) {
    createDiv();
  }
  main();
}

// reset function
function resetGrid(sidee) {
  boxSide = sidee;
  table.innerHTML = "";
  init();
  size.value = sidee;
}

function main() {
  for (var i=0; i<box.length; i++) {
    box[i].addEventListener("mouseover", function() {
      if (type === "random") {
        randomColor(this);
      }
      else {
        opacityIncrement(this);
      }
    });
  }
}

function opacityIncrement(event) {
  event.style.background = "#f5f5f5";
  event.style.opacity = parseFloat(event.style.opacity) + 0.2;
}

// get random color
function randomColor(event) {
  event.style.opacity = 1;
  event.style.background = "#"+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
}

// creates div and append it to the table
function createDiv() {
  var divElt = document.createElement("div");
  divElt.classList.add("box");
  divElt.style.height = table.offsetWidth / boxSide + "px";
  divElt.style.width = table.offsetWidth / boxSide + "px";
  divElt.style.opacity = 0.1;
  table.appendChild(divElt);
}