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;
    background: red;
    background: -webkit-linear-gradient(-90deg, #ffcccc, #ccccff);
    background: -o-linear-gradient(-90deg, #ffcccc, #ccccff);
    background: -moz-linear-gradient(-90deg, #ffcccc, #ccccff); 
    background: linear-gradient(-90deg, #ffcccc, #ccccff);
}

p {
    font-family: 'Indie Flower', cursive;
    color: blue;
    font-size: 20px;
    font-weight: bold;
    display: inline;
}
/*the upper title for the page*/
h1 {
    font-family: 'Permanent Marker', cursive;
    color: red;
    text-shadow: 5px 5px 5px blue;
    font-weight: bold;
    font-size: 70px;
    margin: 0.2em;
}

h2 {
    margin: 1em 0 0.25em;
    font-family: cursive;
    text-shadow: 1px 1px 1px red;
    color: blue;
 
}

h2:first-of-type {
    margin-top: 0.5em;
}

table,
tr,
td {
    border: 1px solid black;
    background-color: white;
}

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

tr {
    height: 20px;
}

td {
    width: 20px;
}

input[type=number] {
    width: 6em;
    border-radius: 20%;
}

input[type=color] {
    border-radius: 20%;
}

button,
input[type=submit]{
    font-family: cursive;
    font-weight: bold;
    border-radius: 30%;
    box-shadow: 2px 2px 5px red; 
    background-color: lightblue;
}

#submit_button {
    margin-left: 20px;
}
/* the tip paragraph*/
#tip {
    display:block;
    font-style: italic;
}
/* the drawing area is initially hidden*/
#canvasArea {
    display : none;
}
/* the resize button layout */
#resizeCanvasButton {
    float: right;
    display: inline-block;
    margin-top: 1%;
}
/* the border button layout*/
#bordercontroler{
    margin-top: 1%;
    margin-left:-5%
}
/*The area where the buttons and the h2 title are*/
#upperBanner {
    display : block;
    height: 10%;
    margin: 2% 0% 5%;
}
/* THe area where the table is*/
#drawArea {
    display : block;
    padding-top: 5%;
}
/*the h2 title for the drawing area*/
#canvas_title {
    margin: 0px;
    font-family: 'Permanent Marker', cursive;
    color: red;
    text-shadow: 5px 5px 5px blue;
    font-weight: bold;
    font-size: 30px;
    float: left;
    display: inline-block;
    position: static;
}
JS
$( document ).ready(function pageScript(){
/*
Table of content
* ===1 canvas object and values===
* ===2 canvas Function ===
* ===3 layout modifying ===
*/
/*
* ===1 canvas object and values===
*/
/*declaring an object for the canvas and set initial values and a function with nested loop to create a canvas */
const pixelsCanvas = {
    height : $('#input_height').val(),
    width : $('#input_width').val(),
    color : $('#colorPicker').val(),
    id : '#pixel_canvas',
    setgrid : function() {
        
        for (let i=0 ; i < pixelsCanvas.height ; i++){
            const rowid = "rowof"+i ;
            $(pixelsCanvas.id).append("");
          
            for (let x=0 ; x");
            
            }
        }
    }
};
//TODO: toggle the values of the canvas object according to the user's choices
$('#input_height').change(function(){
    pixelsCanvas.height = $('#input_height').val();
}) 
$('#input_width').change(function(){
    pixelsCanvas.width = $('#input_width').val();
})
$('#colorPicker').change(function(){
    pixelsCanvas.color = $('#colorPicker').val();
})
/*
* ===2 canvas Function ===
*/
/*
TODO: create the grid using the the canvas setgrid method it also allow the user to recreate the canvas with different values : height and width. 
TODO: Allow the user to set multiple background colors to the table cells
the function also hide the selectors area and shows the canvas area that is by default hidden.
*/
$('#submit_button').click(function makeGrid(e) {
    e.preventDefault();
    let gridlength  = $(pixelsCanvas.id).html().length;
    if(gridlength === 0 ){
        pixelsCanvas.setgrid();
    }else{   
        $(pixelsCanvas.id).remove();
        $('#table_pixles').append('');
                  pixelsCanvas.setgrid();
    }
    $(pixelsCanvas.id).on('click',function setcolor(e) {
        $(e.target).css({"background-color": pixelsCanvas.color});});
    $('#canvasModifiers').css("display","none");   
    $('#canvasArea').css({ "display": "block"});
    }  
);


/*
* ===3 layout modifying ===
*/
//TODO: Show or hide the selectors area.
$('#resizeCanvasButton').click(function resizeCanvas(e) {
    e.preventDefault();
    let identifiersDisplayed = $('#canvasModifiers').css("display")
    if(identifiersDisplayed === "none"){
        $('#canvasModifiers').css("display","block");
        $('#resizeCanvasButton').html(" Hide selectors");
        //font awesome class:
        $('#resizeCanvasButton').attr('class','icon-collapse-top')

    }else{
       $('#canvasModifiers').css("display","none");
       $('#resizeCanvasButton').html(" Show selectors");
       //font awesome class:
       $('#resizeCanvasButton').attr('class','icon-collapse')
     }
});
//TODO: Show or hide the table's border
let isBorderRemoved = 0;
$('#bordercontroler').click(function toggleborder(e){
    e.preventDefault();
    if(isBorderRemoved===0){
        $('table, tr ,td').css("border","none");
        isBorderRemoved++
         $('#bordercontroler').html("Show borders!");
    }else{
        $('table, tr ,td').css("border","1px solid black");
        isBorderRemoved--
        $('#bordercontroler').html("hide borders!");
        }
 });
//TODO: Changes the layout of buttons and input type submit elemnts on mouseHover.
$('button,input[type=submit]').mousemove(function(e){
    $(e.target).css("box-shadow","5px 5px 10px red")
});
$('button,input[type=submit]').mouseleave(function(e){
    $(e.target).css("box-shadow","2px 2px 5px red")
});
});
Wed, 12/27/2017 - 07:02

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv