Circle Inside 4Circle

by aanita0309

HTML

<html>
<div id="auto1" class="circle big">
</div>

CSS

html, body { height: 100%; padding: 0; margin: 0; }

.circle { 
  border-radius:50%;
  float: left;
  background:blue;
  
  }
  
.big { 
  width: 50%; 
  height: 100%;
 
  }

.small { 
  width: 50%; 
  height: 50%;
  }

JavaScript

$('.circle').on('click',function(e){

var div1="<div id='div1' class='circle small'>";
var div2="<div id='div2' class='circle small'>";
var div3="<div id='div3' class='circle small'>";
var div4="<div id='div4' class='circle small'>";

 var target = $(e.target );

 target.append(div1, div2,div3,div4);
 target.css('background-color',"white");

})