Skip to content

Instantly share code, notes, and snippets.

@adrianbadarau
Last active August 29, 2015 14:04
Show Gist options
  • Save adrianbadarau/980aeec454e332f08f86 to your computer and use it in GitHub Desktop.
Save adrianbadarau/980aeec454e332f08f86 to your computer and use it in GitHub Desktop.
.container-canvas {
width: 960px;
margin: 0 auto;
}
.pixel {
width: 16px;
height: 16px;
display: block;
float: left;
border: 1px solid;
margin: 1px;
}
.pixel.activated {
background-color: blue;
}
<!DOCTYPE html>
<html>
<head>
<title>Schech</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script rel="text/javascript" src="js/jquery-2.1.1.js"></script>
<script rel="text/javascript" src="js/bootstrap.js"></script>
<script rel="text/javascript" src="js/schech.js"></script>
</head>
<body>
<button id="canvas_reset" type="button" class="btn btn-primary btn-lg">Reset</button>
<div class="container-canvas">
</div>
</body>
</html>
/**
* Created by adiba_000 on 8/2/14.
*/
var canvasHeight = 16
var canvasWidth = 16
function show_prompt()
{
var canvasHeight=prompt("Please enter canvas Height");
var canvasWidth=prompt("Please enter canvas Width");
generate_canvas(canvasWidth, canvasHeight)
}
function generate_canvas( mw, mh ){
for(var i = 0; i<(mw*mh); i++ ){
$( "<div class='pixel'></div>" ).appendTo( ".container-canvas" )
}
$('.pixel').hover(
function(){$(this).addClass('activated')}
);
}
$(document).ready(function(){
generate_canvas(canvasWidth, canvasHeight)
$('#canvas_reset').click(
function(){
$('.container-canvas').empty();
show_prompt();
}
);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment