LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



    
    
    

	Pixel Art Maker!
	
	






	

Lab: Pixel Art Maker

Choose Grid Size

Height: Width:

Pick A Color

Design Canvas

CSS
#mainDiv{
    margin: 5%;
    padding-bottom: 5%;
    border: 2px solid black;
    border-radius: 10px;
    background-color: #3a87ad;
    -webkit-box-shadow: 6px 7px 18px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: 6px 7px 18px 1px rgba(0,0,0,0.75);
    box-shadow: 6px 7px 18px 1px rgba(0,0,0,0.75);
}

body {
    text-align: center;
    background-color: #5bc0de;
}

h1 {
    font-family: 'Indie Flower', cursive;
    font-size: 70px;
    margin: 1em;
}

h2 {
    margin: 1em 0 0.25em;
}

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

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

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

tr {
    height: 20px;
}

td {
    width: 20px;
}

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

input[type=submit] {
    border-radius: 3px;
}

#pixelCanvas{
    background-color: #fff;
    -webkit-box-shadow: 6px 7px 18px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: 6px 7px 18px 1px rgba(0,0,0,0.75);
    box-shadow: 6px 7px 18px 1px rgba(0,0,0,0.75);
}

#my-input:invalid {
    color: red
}
JS
const submit = $("#submitButton");
const colorPicker = $("#colorPicker");
const gridTable = $("#pixelCanvas");
const grid = $("table");

function makeGrid(event) {
    // event.preventDefault(); // Prevent of refreshing site


    grid.empty();
    const gridRows = $("#inputHeight").val(); // gets value from height
    const gridCols = $("#inputWidth").val(); // gets value from width



    // Create rows
    for (let i = 0; i < gridRows; i++) {
        grid.append("");

        // Create cols
        var td = $("tr:last-child");
        for (let j = 0; j < gridCols; j++) {
            td.append("")
        }
    }
}

// There will be color picker
colorPicker.change(function () {
    const pickedColor = colorPicker.val(); // gets value of picked color
    console.log(">>>>>>>>>>>", pickedColor);
});

// Color each cell
gridTable.on("mousedown", "td",  function(){
    const pickedColor = colorPicker.val();
    $(this).css("background-color", pickedColor);
});

// Changed coursor type to pointer on grid
gridTable.on("mousemove", function(){
    $(this).css("cursor", "pointer");
});

const sizePicker = $("#sizePicker");
sizePicker.on("submit", function(e) {
    e.preventDefault();
    makeGrid();
});
Wed, 12/27/2017 - 07:02

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv