I'm writing the code for an Etch-A-Sketch-Pad program. The Pad, is a container div (#container) with a grid of divs (.unit) inside. Every .unit element is 12px by 12px in total (margin included). The size of #container depends on the dimensions of the .unit grid. For example, if the width of the grid is 3, #container's width should be 3 * 12 = 36px. Every .unit element should also permanently turn black when hovered over by the mouse.
Here are the problems I'm running into:
-
In the createGrid function, lines 29-32, the dimensions of #container aren't being created. Because of this, the .unit grid does not exist as intended.
-
In lines 46-48, the .attr function doesn't work. Because of this, the .unit divs don't turn black.
Any comments that start with supposed to, point to a problem/bug. I'm a beginner, so please be very critical of my work. Any help is greatly appreciated, thank you!
EASP.html
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="EASP.css">
<head>
<title>Etch-A-Sketch-Pad</title>
</head>
<body>
<!--#container is supposed to be responsive to the client's specifications-->
<div id="container"></div>
<!--script that implements jQuery-->
<script src="http://ift.tt/1h847p1"></script>
<!--script that creates a y-by-x grid inside #container for the client to draw on-->
<script src="EASP.js"></script>
</body>
</html>
EASP.css
#container {
background-color: white;
/* supposed to be
height: h;
width: w;
*/
}
.unit {
height: 10px;
width: 10px;
margin: 1px;
float: left;
}
EASP.js
/* This script contains/performs the following in order of appearence:
1. createGrid(y,x) ~ creates a grid of divs
* client specifies arguments y and x
- y is the amount of rows in the grid
- x is the amount of columns in the grid
* sets the height and width of the #container div
- #container's size is responsive to the size of the grid
* creates a y-by-x grid of .unit divs inside the #container div
- every div takes up 12px-by-12px in #container
2. creates an initial 16-by-16 grid of .unit divs inside #container div
* createGrid(16,16)
* #container should be 192px-by-192px
3. colors any .unit hovered over by the mouse
* .unit has no background-color by default
* .unit is given {background-color: black;} when hovered over
4. Reset and Resize button
* when clicked
- removes all .unit elements in the DOM
- prompts the client for new x and y dimensions
- createGrid(newY,newX)
*/
$(document).ready(function() {
//creates a container and inserts a grid
var createGrid = function(y,x) {
this.y = y;
this.x = x;
//h = height value and w = width value of #container
var h = (this.y * 12).toString() + 'px';
var w = (this.x * 12).toString() + 'px';
//supposed to set the height and width attributes of #container
$('#container').attr({height: h, width: w});
//creates a y by x grid of divs inside #container
for(var yc = 0; yc < this.y; yc++) {
for(var xc = 0; xc < this.x; xc++) {
$('<div class=unit></div>').appendTo('#container');
}
}
};
//creates an initial 16 by 16 grid inside #container
//#container should be 192px by 192px for this call
createGrid(16,16);
//supposed to add {background-color: black;} to the hovered over .unit
$('.unit').hover(function() {
$(this).attr('background-color','black');
});
/*think of it as drawing on a piece of paper with a black crayon.
#container is the white paper {background-color: white;} made of
.unit divs that have no color,
adding the {background-color: black;} to a .unit element
is where the blackcrayon drew
*/
//button at the top of the page
$('<button id=reset>Reset and Resize</button>').prependTo('body');
//resets and resizes the grid when clicked
$('#reset').click(function() {
//removes all .unit elements that exist in the DOM
$('.unit').each(function() {
$('.unit').remove();
});
/*dimensions for the new y-by-x grid to be created,
that the client specifies*/
var newY = prompt("What size (integer) would you like \
your y dimension to be?");
var newX = prompt("What size (integer) would you like \
your x dimension to be?");
//the new y-by-x grid is called
createGrid(newY,newX);
});
});
Aucun commentaire:
Enregistrer un commentaire