JS - Add grid lines

by 3rror404

HTML

<div id="wrapper">
  <img id="img" src="http://placehold.it/300x300">
</div>

<input id="rows" type="number" name="row" placeholder="Rows">
<input id="cols" type="number" name="column" placeholder="Columns">
<button id="update">Update</button>

CSS

#wrapper {
  width: 300px;
  height: 300px;
  position: relative;
}

.line {
  background: white;
  position: absolute;
}

.row {
  height: 1px;
  left: 0;
  right: 0;
}

.column {
  width: 1px;
  top: 0;
  bottom: 0;
}

JavaScript

// Reference used elements
var wrapper = document.getElementById('wrapper');
var btn = document.getElementById('update');
var rows = document.getElementById('rows');
var cols = document.getElementById('cols');

btn.addEventListener("click", drawLines);

function drawLines() {
	// Clean up
	removeLines();

	var rowCount = rows.value;
  var colCount = cols.value;
  var wrapperHeight = wrapper.clientHeight;
  
  // Create rows
  //if (rowCount > 1) {
    for(var i = 1; i < rowCount; i++) {
      var line = document.createElement('div');
      line.className = 'line row';
      line.style.top = (wrapperHeight/rowCount)*i + 'px';

      wrapper.appendChild(line);  
    }
  //}
  
  // Create columns
  //if (colCount > 1) {
    for(var i = 1; i < colCount; i++) {
      var line = document.createElement('div');
      line.className = 'line column';
      line.style.left = (wrapperHeight/colCount)*i + 'px';

      wrapper.appendChild(line);  
    }
  //}
}

function removeLines() {
	var lines = document.getElementsByClassName('line');
  while(lines.length > 0){
    lines[0].parentNode.removeChild(lines[0]);
  }
}