LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

    

Pixel Art Maker





CSS
.border {
    border-style: solid;
    border-width: 5px;
}

.border-shadow {
    box-shadow: 0px 0px 8px 3px rgba(175, 191, 219, 1);
}

hr.style17 {
    border-top: 1px solid #8c8b8b;
    text-align: center;
}

hr.style17:after {
    content: '§';
    display: inline-block;
    position: relative;
    top: -14px;
    padding: 0 10px;
    background: #f0f0f0;
    color: #000000;
    font-size: 18px;
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    transform: rotate(60deg);
}

h1 {
    font-family: Monoton;
    font-size: 70px;
    margin: 0.2em;
}
JS
$('document').ready(function() {


    var btnSubmit;

    //flag to detect if the button submit has clicked ot not 
    var isClicked = false;

    // function the delete all element from  
    function clearTable() {
        var table = $('#pixel-canavas');
        table.empty();
    }

    //clear the input text value when refreshing the page
    function clearValues() {
        $('#GridHeight').val("");
        $('#GridWidth').val("");
    }


    $('body').bind('beforeunload', clearValues());

    // take input from input fields the create a table with these inputs
    btnSubmit = $('#btnSubmit').click(function() {
        clearTable()
        isClicked = true;
        var txtGridHeight, txtGridWidth, height, width, table;
        txtGridHeight = $('#GridHeight');
        txtGridWidth = $('#GridWidth');
        table = $('#pixel-canavas');
        height = txtGridHeight.val();
        width = txtGridWidth.val();

        //adding rows
        for (let index = 0; index < height; index++) {
            table.append('');
        }

        //adding cells according to the rows number
        var counter = 0;
        for (let i = 0; i < $('#pixel-canavas').children().length; i++) {
            $('#pixel-canavas').children().each(function() {
                $(this).append('');
                counter++;
            })
        }
    });


    // add listner for each cell in the table
    function cellClick() {
        if (isClicked) {
            var tableJ = document.getElementsByClassName('cell');
            var color = document.getElementById('colorPicker').value;

            for (var i = 0; i < tableJ.length; i++) {
                console.log(tableJ[i]);

                tableJ[i].addEventListener('click', function(index) {
                    index['target'].style.background = color;
                });
            }
        }

    }
    setInterval(cellClick, 2000);
})

Description

A simple project allow user to choose the size of the pixel canvas then select the color , and finally color the selected pixel by the selected color.
Wed, 12/27/2017 - 07:03

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv