2

I'm attempting to make a basic Sketchpad using HTML/CSS/Javascript/jQuery. The grid itself has a set size to begin with, but when a button is clicked, the user is asked how big they want the grid/Sketchpad to be. When they enter the amount, a new grid is created. The project I'm completing says that the container div's height/width should not be changed, but the .square divs should change according to the input (e.g. if the user wants a 5 by 5 grid, the .square divs will change size according to the input). I've done this, but I've encountered two big problems:

1) There is usually leftover space in the container div, so one of the .square divs is much smaller than the rest, and

2) I don't know how to make sure the number of divs across and down are the same - 6 by 6, rather than, for example, 4 by 9.

Thank you!

Here is my code so far. Apologies in advance for if it's messy - I'm just beginning web development.

HTML:

<!DOCTYPE html>
<html>
<head>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="jquery.js"></script>
    <script type="text/javascript" src="sketchpad.js"></script>
    <title>Sketchpad</title>
</head>
<body>
    <button id="clearGrid">Clear Grid</button>
    <div class="container">

    </div> <!-- container -->
<body>  
</html>

CSS

.container {
    height: 960px;
    width: 960px;
    font-size: 0px;
    margin: 150px auto;
}

#clearGrid {
    display: block;
    margin: 0 auto;

}

.square {
    border: 1px solid black;
    height: 20px;
    width: 20px;
    display: inline-block;
}

Javascript/jQuery

$(document).ready(function() {

var squareGrid = 256;

for (i = 0; i < squareGrid; i += 1) {
 $(".container").append('<div class="square"></div>');
}

squareGrid;

$(".square").hover(function() {
    $(this).css("background-color", "green");
}, function() {
    $(this).css("background-color", "green");
    });

$("#clearGrid").click(function() {
    $(".square").css("background-color", "");
    $(".square").remove(); //Removes current grid
    var input = prompt("How big do you want to make your Sketchpad? Enter a number.");
    if(isNaN(input))
        alert("Please enter a number.");

    else {
        $(".square").removeAttr("width");
        $(".square").removeAttr("height");
        for (l = 0; l < (input * input); l += 1) {
            $(".square").css("width", ".container" / input);
            $(".square").css("height", ".container" / input);
            $(".container").append('<div class="square"></div>');
        }
    };

    $(".square").hover(function() {
        $(this).css("background-color", "green");
    }, function() {
        $(this).css("background-color", "green");
    });

}); 
});
Jasmine Batchellor-Sequeira
  • 53
  • 6
  • 1
    Im not sure that creating divs and using them as the pixels is the best way to go about creating a sketch program on the web. I would think that canvas is going to be a better method for doing what you're looking for. Explanation of canvas: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API Working sketch program in canvas: http://stackoverflow.com/questions/2368784/draw-on-html5-canvas-using-a-mouse – Robert430404 Aug 12 '15 at 16:50
  • 1
    @Psyco430404 It was a project from The Odin Project which told me to use divs. Definitely not the most effective way of making a sketchpad, but it's very early on in the course! – Jasmine Batchellor-Sequeira Aug 12 '15 at 16:54

1 Answers1

1

jQuery

var w = $('.container').outerWidth();

var h = $('.container').outerHeight();

$('.square').outerWidth(w).outerHeight(h);

CSS

html {
    box-sizing: border-box;
    font: 500 16px/1.45 Consolas;
}

*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
}

The simplest way to ensure how many squares you have in rows and columns is by using a table or using the display: table family of CSS properties. I prefer flexbox over table or floats.

Another Suggestion: Flexbox

Here's a DEMO I made for a previous question

Community
  • 1
  • 1
zer00ne
  • 41,936
  • 6
  • 41
  • 68
  • I've just checked again and my code seems to work except for one little bit. The last div generated by jQuery when a user types in a value is always the original size from before I remove all the height and width css values. Do you know why this could be? – Jasmine Batchellor-Sequeira Aug 12 '15 at 18:41
  • Your `for` loop looks a little off, try this: for (var l = 0; l < (input * input); l ++) – zer00ne Aug 12 '15 at 18:45
  • I forgot there's that top loop to: for (var i = 0; i < squareGrid; i ++) – zer00ne Aug 12 '15 at 18:47
  • It didn't change anything... it's as though that particular div isn't being formatted at all when I run the code, but space is still being left to accomodate it. :S – Jasmine Batchellor-Sequeira Aug 12 '15 at 18:55
  • Fixed it at last! I had to move $(".container").append('
    '); up before $(".square").css("width", 320 / input); $(".square").css("height", 320 / input); - thanks for your help! :)     – Jasmine Batchellor-Sequeira Aug 12 '15 at 19:22