Currently working on a small project for an online course where I need to create a 16x16 grid of divs using jQuery for DOM manipulation. However, I've encountered an issue - the divs are overlapping each other. As a beginner seeking constructive criticism, any feedback would be greatly appreciated. Thank you!
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="EASP.css">
<head>
<title></title>
</head>
<body>
<div id="container"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="EASP.js"></script>
</body>
</html>
#container {
background-color: red;
height: 192px;
width: 192px;
}
.unit {
background-color: blue;
height: 10px;
width: 10px;
margin: 1px;
display: inline-block;
}
$(document).ready(function() {
var unit = $("<div class='unit'></div>");
for(var x = 0; x < 2 x++) {
for(var y = 0; y < 2; y++) {
unit.appendTo('container');
}
}
});