Skip to content

Instantly share code, notes, and snippets.

@dariye
Created November 18, 2013 10:12
Show Gist options
  • Save dariye/7525551 to your computer and use it in GitHub Desktop.
Save dariye/7525551 to your computer and use it in GitHub Desktop.
A Pen by pauldariye.
<html>
<head>
<title>Sketch Pad</title>
</head>
<body>
<div class="grid-controls">
<button> Clear Grid </button>
</div>
<div class="container">
</div>
</body>
</html>
$(document).ready(function () {
var default_boxes_per_row = 10;
var page_width = 960;
var height_and_width_of_each_box = Math.round(page_width/default_boxes_per_row) - 2;
for(var i = 1; i <= Math.pow(default_boxes_per_row, 2); i++) {
$('.container').append('<div id="page-' + i + '"class="box"></div>');
}
$('.box').width(height_and_width_of_each_box);
$('.box').height(height_and_width_of_each_box);
$('.container > div').hover(function() {
$(this).css('background-color', get_random_color);
});
$('button').click(function() {
$('.container > div').remove();
if(confirm("Draw new grid?"))
{
default_boxes_per_row = prompt("Define width of grid");
gridulator(default_boxes_per_row);
$('.container > div').hover(function() {
$(this).css('background-color', get_random_color);
});
}
else
{
$('.container').append('<h1>What to do now?</h1>');
}
});
});
var gridulator = function (boxes_per_row) {
boxes_per_row = typeof boxes_per_row !== 'undefined' ? boxes_per_row : 10;
var page_width = 960;
var height_and_width_of_each_box = Math.round((page_width/boxes_per_row)) - 2;
for(var i = 1; i < Math.pow(boxes_per_row, 2); i++) {
$('.container').append('<div id="page-' + i + '"class="box"></div>');
}
$('.box').width(height_and_width_of_each_box);
$('.box').height(height_and_width_of_each_box);
};
var get_random_color = function() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
};
*, *:before, *:after {
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
}
.container {
/* display: -webkit-flex;
flex-wrap: wrap;
flex-direction: row;*/
margin: auto;
width: 960px;
height: 960px;
}
.box {
display: inline-block;
width: 16px;
height: 16px;
background-color: #ff0000;
margin: 0;
border: 1px solid #000;
float: left;
}
.grid-controls {
width: 100%;
margin: 20px auto;
text-align: center;
}
button {
background-color: #5098FF;
border-radius: 8px;
border: 3px;
line-height: 30px;
box-shadow: 1px 1px 1px 1px #fafafa;
outline-color: #fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment