LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

    Pixel Art Maker!
    
    
    
    


    
Pixel Art Maker

Choose Grid Size

Grid Height: Grid Width:

Pick A Color

Design Canvas

CSS
body {
    text-align: center;
    
}
/* inserted a colored responsive background */
.colore {
    max-width: 90%;
    margin: 0 auto;
    background-color: #8888aa;
    padding-bottom: 30px;
}
/* changed h2 style */
h2 {
    font-family: 'Acme', sans-serif;
    font-size: 50px;
    margin: 1em 0 0.25em;
}

h2:first-of-type {
    margin-top: 0.5em;
}
/* changed form input and font dimension */
#sizePicker {
    font-size: 20px;
}

table,
tr,
td {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    margin: 0 auto;
}

tr {
    height: 20px;
}

td {
    width: 20px;
}
/* changed form input and font dimension */
input[type=number] {
    width: 6em;
}

input, textarea {
    font-size: 18px;
}
/* added a shadow and an hover and active effect to buttons */
input[type="submit" i] {
    width: 5em;
    background-color: #06a7ab;
    margin-top: 30px;
    box-shadow:  5px 5px 5px 0px rgba(0,0,0,0.42);
}

input[type="submit" i]:hover {
    background-color: #057678;
}

input[type="submit" i]:active {
    background-color: #057678;
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);;
    transform: translateY(3px);
}

#gomma {
    margin: 10px;
    background-color: #ff9900;
}

#gomma:hover {
    background-color: #cc7a23;
}

#pennello {
    margin: 10px;
    background-color: #ff9900;
}

#pennello:hover {
    background-color: #cc7a23;
}

#clearAll {
    width: 7em;
    margin-top: 10px;
    font-size: 18px;
}

#clearAll:hover {
    background-color: #ccc;
}

button {
    box-shadow:  5px 5px 5px 0px rgba(0,0,0,0.42);
}

button:active {
    background-color: #3e8e41;
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);;
    transform: translateY(3px);
}

JS
function makeGrid(altezza, larghezza) {
    // make a grid function
    var altezza = $('#input_height').val();
    var larghezza = $('#input_width').val();
    for (var n = 1; n <= altezza; n++) {
        $('table').append('');
        $(this).css('background-color', '#fff');
    }
    for (var m = 1; m <= larghezza; m++) {
        $('tr').each(function() {
            $(this).append('');
            $(this).css('background-color', '#fff');
        });
    }
    // paint function
    $('table').mousedown(function(){
        $('td').bind('mousedown mousemove', function () {
            let colore = $('#colorPicker').val();
            $(this).css('background-color', colore);
        });
    });
    // stop paint function
    $('table').mouseup(function() {
        $('td').unbind('mousedown mousemove');
    });
    
};
// call to makeGrid function on form submit
$( document ).ready(function() {
    $('#sizePicker').on('submit', function(evt) {
        makeGrid();
        evt.preventDefault();
    });
});

$(document).ready(function(){
    function cancella() { // clear pixels function
        $('table').mousedown(function() {
          $('td').bind('mousedown mousemove', function() {
            $(this).css('background-color', '#fff');
            });
        });
    }
    // call clear pixels function when eraser is clicked and change the cursor
    $('#gomma').on('click', cancella);
    $('#gomma').on('click', function() {
        $('td').css('cursor', 'cell')
    });
    // cancel clear pixels function when brush is clicked
    $('#pennello').click(function(){
       $('table').mousedown(function(){
            $('td').bind('mousedown mousemove', function () {
                let colore = $('#colorPicker').val();
                $(this).css('background-color', colore);
            });
        });
        $('td').css('cursor', 'default');
    });
    // clear all the canvas without to update the page
    $('#clearAll').click(function() {
        $('td').css('background-color', '#fff');
    });
    
});
Wed, 12/27/2017 - 07:03

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv