I'm working on creating an etch-a-sketch in the browser. Right now, it only works with a size of 7200, but I want to make it more dynamic. I'd like users to be able to input any number and have the grid adjust accordingly. For example, if they enter 16, it should create a 16x16 grid, or if they enter 100, a 100x100 grid. Also, how can I ensure that my div elements adapt to fill the screen no matter how many are generated?
Here's my HTML:
<DOCTYPE html>
<html>
<head>
<title>Project</title>
<script type="text/javascript" src="JS/jquery-1.12.0.js"></script>
<script type="text/javascript" src="JS/etch.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div class="button">
<button type="button" id="clear-button">Clear Board</button>
</div>
<div id="game"></div>
</div>
</body>
</html>
My CSS looks like this:
#wrapper {
width: 1000px;
height: 760px;
background-color: gray;
}
.grid {
width: 10px;
height: 10px;
float: left;
}
.draw {
background-color: black;
}
.button {
width: 1000px;
height: 40px;
}
#clear-button {
margin: auto;
display: block;
}
Finally, here's my JavaScript code:
var count = 0;
$(document).ready(function() {
while(count < 7200){
$('#game').append('<div id="grid-"'+ count +' class="grid"></div>');
count++;
};
$('.grid').on({
mouseenter: function () {
$(this).addClass('draw');
},
mouseleave: function () {
$(this).addClass('draw');
}
});
$('button').click(function() {
$('#game').empty();
count = 0;
var size = prompt("What size would you like the new etch-a-sketch to be?");
while(count < size){
$('#game').append('<div id="grid-"'+ count +' class="grid"></div>');
count++;
};
$('.grid').on({
mouseenter: function () {
$(this).addClass('draw');
},
mouseleave: function () {
$(this).addClass('draw');
}
});
});
});