SO - 25518243

HTML

<body>
    <div class="header">
         <h1>Sketchamabober</h1>

         <h2>An exercise from The Odin Project</h2>

         <h3>By Joshua Furr</h3>

    </div>
    <div class="subWrapper">
        <div class="wrapper">
            <img class="knob1" id="left" src="http://orig06.deviantart.net/5e8a/f/2011/317/1/0/vg_tech_circle_02_by_xxmissarichanxx-d4g4o7y.png">
            <img class="knob2" id="right" src="http://orig06.deviantart.net/5e8a/f/2011/317/1/0/vg_tech_circle_02_by_xxmissarichanxx-d4g4o7y.png">
            <div id="workspace"></div>
        </div>
    </div>
    <div class="footer">
        <button type="button" id="clear">Clear</button>
        <button type="button" id="pickColor">Color</button>
        <button type="button" id="randomcolors">Random Colors</button>
        <button type="button" id="backgroundColor">Background Color</button>
        <button type="button" id="lineSize">Sketch Size</button>
        <div id="statusleft">0</div>
        <div id="statusright">0</div>
    </div>
            <div class="sources">
                <h2>I started learning web developement coding a month ago. I couldn't have done it without the following sources to learn from. For free, at that! Credit where it is due:<h2>
                <ul>
                    <li><a href="codecademy.com"><img src="http://www.underconsideration.com/brandnew/archives/codecademy_logo_detail.png" height=40px width=150px></a></li>
                        <li><a href="theodinproject.com"><img src="https://lh3.googleusercontent.com/-xThf-8PrR_Y/VWVfcxleCsI/AAAAAAAABgo/bv2E3a7wG6c/w506-h750/odin.png" height=80px width=150px></a></li>
                            <li><a href="overapi.com"><img src="https://s-media-cache-ak0.pinimg.com/236x/62/99/18/62991859e09dd451ff1e46518f82da07.jpg" height=40px width=150px></a></li>
                            <ul id="overAPI">
                                <li><a href="http://overapi.com/html/">OverAPI HTML Cheat Sheet</a></li>
              ...

CSS

body {
    margin:0 auto;
    display: block;
    width: auto;
    background:black;
}
.header {
    text-align:center;
    background-color:black;
    color:yellow;
    padding: 20px 0;
}
.subWrapper {
    text-align:center;
    background:url(http://c4.q-assets.com/images/products/p/zeh/zeh-033_1z.jpg)center center;
    background-repeat:no-repeat;
    background-size:660px 512px;
    margin-left: auto;
    margin-right:auto;
    margin-top:0px;
    margin-bottom:0px;
    height:595px;
    width:700px;
}
.knob1, #left {
    position:absolute;
    margin-top:468px;
    margin-left:-71px;
    height:83px;
    width:83px;
}
.knob2, #right {
    position:absolute;
    margin-top:468px;
    margin-left:493px;
    height:82px;
    width:82px;
}
#workspace {
    text-align:center;
    background-color:white;
    width:500px;
    height:320px;
    margin: 125px auto 0 auto;
    display:inline-block;
    border:5px solid white;
    border-radius:15px;
    line-height: 0px;
    overflow: hidden;
    box-shadow: 0px 0px 15px black;
}
.blocks {
    display:inline-block;
    background-color:white;
    margin:0;
}
.blackBlocks {
    background-color:black;
}
.footer {
    text-align:center;
    margin:0, auto;
    padding:10px 0;
}
#statusleft, #statusright {
    background-color:white;
    color:black;
}
button {
    background-color:yellow;
    color:black;
    margin:0 10px;
}
#statusleft {
    display:none;
}
#statusright {
    display:none;
}
.sources {
    color:yellow;
    text-align:center;
}
.sources ul {
    list-style:none;
    margin:10px auto;
    text-align:center;
}
.sources ul li {
    display:inline-block;
    margin:0px 10px;
}
#overAPI {
    display:block;
    font-size:14px;
}
}

JavaScript

//Document ready function to start the code when the page is ready
$(document).ready(function () {

    //Function to wipe clean for later use
    function clearSpace() {
        $(".blocks").removeClass('blackBlocks');
        $(".blocks").css('background-color','white');
    }

    //Code to add the defaut grid on load
    var blockSize;
    var blocks$;

    function defaultGrid() {
        var divArray = [];
        var blockRow = 320 / 10;
        var blockColumn = 500 / 10;
        var gridDimension = blockRow * blockColumn;
        $('#workspace').off();
        $('#workspace').html('');
        for (var i = 1; i <= gridDimension; i++) {
            divArray[i] = "<div class='blocks' style='width:" + 10 + "px; height:" + 10 + "px;'></div>"
        }
        $('#workspace').append(divArray.join(''));
        blocks$ = $("div.blocks");
        console.log($('div.blocks').length)
    };
    defaultGrid();

    //Code to begin coloring once mouse enters the grid
    function beginColoring() {
        $('.blocks').on('mouseover', 'div', function () {
            $(this).addClass('blackBlocks');
            
        });
        $('#workspace').on('mouseenter', 'div', function () {
            $(this).addClass('blackBlocks');
        });
        $('#workspace').on('mousemove', 'div', function () {
            $(this).addClass('blackBlocks');
        });
    }
    beginColoring();

    //Code for Sketch Size button & function for new grid
    function newGrid() {
        var divArray = [];
        var blockRow = 420 / blockSize;
        var blockColumn = 600 / blockSize;
        var gridDimension = blockRow * blockColumn;
        $('#workspace').html('');
        for (var i = 1; i <= gridDimension; i++) {
            divArray[i] = "<div class='blocks' style='width:" + blockSize + "px; height:" + blockSize + "px;'></div>"
        }
        $('#workspace').append(divArray.join(''));
        blocks$ = $("div.blocks");
        console.log($('div.blocks').length)
   ...