Basic DOM manipulation

an example of basic DOM manipulation

by Darren Welch

HTML

<form action="#">
 <div class="circleGrid"></div>
 
 </form>

CSS

.circle {
  display: block;
  background: #DDD;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  float: left;
  margin:5px;
  background-color:#FFF;
  border: 2px solid #ddd;
}

JavaScript

var colours = ['#191970','#000080','#6495ed	','#483d8b','#6a5acd'
								,'#7b68ee','#8470ff','#0000cd'];

function makeCircle(quantity)
{
var totColours = colours.length;
var currentColour = 0;
var myNewElement;
var myElement = document.querySelector('.circleGrid');

for (var i = 0; i < quantity; i++)
{
myNewElement = document.createElement('div');
myNewElement.className = 'circle';
myNewElement.style = 'background-color:' + colours[currentColour];
myElement.appendChild(myNewElement);

myElement.addEventListener('click', function(e){
e.target.parentNode.removeChild(e.target);
}, false);

if (currentColour === totColours-1)
{
	currentColour = 0; //reset to the beginning
}
else
{
	currentColour ++;
}

}

}

makeCircle(40);