LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



    
    
    
    
    
    

    Pixel Art Maker



    

Pixel Art Maker

Choose the Height and the Width of the Canvas!

Grid Height: Grid Width:

Style Menu

Choose
pen color

Choose Border Color

Add/Delete Borders

Cell
Eraser

Single right click to erase cell.

Reset Canvas Style!


Design Canvas

Made with ♥ by Chara

CSS
* {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

body,
html {
    font-family: Codystar;
    height: 100%;
    color: #fbe8fc;
}

body {
    background-image: url("http://coventryrecoverycommunity.org.uk/wp-content/uploads/2016/12/christmas-tree-wallpaper-39.jpg");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    min-width: 1000px;
}

header {
    grid-area: 1/1/3/2;
    min-width: 330px;
    padding-top: 50px;
    margin-left: 10px;
}

/* -------------------HEADINGS & TITLES---------------- */

.h1 {
    font-size: 70px;
    color: #fbe8fc;
    text-align: center;
    letter-spacing: 20px;
}

.h2 {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.h3 {
    text-align: center;
}

.second-h3 {
    grid-area: 1/1/2/5;
    margin-bottom: 10px;

}

.borders-color-title {
    grid-area: 1/1/2/4;
    text-align: center;
}

.border-del-title {
    grid-area: 1/1/2/2;
    text-align: center;
}

.reset-canv-st-title {
    grid-area: 1/1/2/2;
    text-align: center;
}

/* -------------------BTNS---------------- */

button {
    font-family: 'Fredericka the Great';
    border-radius: 5px;
    padding: 2px;
    margin-top: 10px;
    cursor: pointer;
    background-color: #fbe8fc;
    -webkit-box-shadow: 7px 7px 32px 6px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 7px 7px 32px 6px rgba(0, 0, 0, 0.6);
    box-shadow: 7px 7px 32px 6px rgba(0, 0, 0, 0.6);
    outline: none;
}

button:active,
input[type="color"]:active {
    outline: none;
    transform: translateY(4px);
    -webkit-box-shadow: 7px 7px 32px 6px rgba(0, 0, 0, 1);
    -moz-box-shadow: 7px 7px 32px 6px rgba(0, 0, 0, 1);
    box-shadow: 7px 7px 32px 6px rgba(0, 0, 0, 1);
}

button:hover,
input[type="color"]:hover {
    background-color: #f9dafb;
}

#submit-brdCol-btn {
    grid-area: 2/2/3/3;
    width: 40px;
    margin-left: 5px;
}

.erase-all-borders-btn {
    min-height: 25px;
    width: 40px;
    text-align: center;
    grid-area: 2/1/3/2;
}

#reset-style-btn {
    min-height: 25px;
    width: 40px;
    grid-area: 2/1/3/2;
}

/* -------------------INPUTS---------------- */

input[type="number"] {
    content: "10";
    width: 70px;
    margin-right: 10px;
    text-align: center;
    border-radius: 5px;
}

input[type="color"] {
    cursor: pointer;
    border-radius: 5px;
    width: 30px;
    height: 20px;
    padding: 1px;
    -webkit-box-shadow: 7px 7px 32px 6px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 7px 7px 32px 6px rgba(0, 0, 0, 0.6);
    box-shadow: 7px 7px 32px 6px rgba(0, 0, 0, 0.6);
}

input[type="number"]:focus {
    border: 3px solid #555;
    outline: none;
}

#colorChoice {
    margin-top: 16px;
}

#colorChoice2 {
    grid-area: 2/1/3/2;
    align-self: center;
    margin-left: 20px;
    margin-top: 12px;
}

/* -------------------SECTIONS DIVISION---------------- */

.first-section {
    grid-area: 1/2/2/4;
    min-width: 440px;
    padding: 0 20px;
}

.second-section {
    grid-area: 2/2/3/4;
    margin: 20px;
}

.third-section {
    grid-area: 3/1/4/4;
    min-height: 500px;
    min-width: 400px;
}

/* -------------------FORMS---------------- */

.form-1 {
    text-align: center;
    padding-top: 25px;
}

.form-2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    justify-items: center;
    align-items: center;
    min-width: 750px;
}

.form-2-1 {
    grid-area: 2/1/3/2;
    text-align: center;
    width: 140px;
    border: 2px dotted #fbe8fc;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 10px 0;
    height: 75px;
}

.form-2-2 {
    grid-area: 2/2/3/3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 140px;
    border: 2px dotted #fbe8fc;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 10px 0;
    height: 75px;
}

.form-2-3 {
    grid-area: 2/3/3/4;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    width: 140px;
    border: 2px dotted #fbe8fc;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 10px 0;
    height: 75px;
}

.form-2-4 {
    grid-area: 2/5/3/6;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    width: 140px;
    border: 2px dotted #fbe8fc;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px 0;
    height: 75px;
}

/* -------------HORIZONTAL RULE------------------ */

hr {
    border: 0;
    height: 0;
    box-shadow: 0 0 10px 3px #fbe8fc;
}

hr:after {
    content: "\00a0";
}

/* -------------------ERASER--------------------- */

.eraser {
    grid-area: 2/4/3/5;
    border: 2px dotted #fbe8fc;
    background-color: rgba(0, 0, 0, 0.6);
    height: 95px;
    width: 140px;

}

.eraser-title {
    text-align: center;
    padding-top: 26px;
}

.eraser .erasertiptext {
    font-family: 'Fredericka the Great';
    visibility: hidden;
    width: 130px;
    background-color: black;
    color: #fff;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    opacity: 0;
    transition: opacity 1s;
}

.eraser:hover .erasertiptext {
    visibility: visible;
    opacity: 1;
}

/* -------------------RESULTS DIV---------------- */

.result-wrapper {
    text-align: center;
    min-height: 100px;
}

#result {
    color: #d9ab70;
    font-weight: bold;
    position: relative;
    text-align: center;
    padding-top: 20px;
}

/* -------------------TABLE---------------- */

#myGrid {
    border-collapse: collapse;
    white-space: nowrap;
    margin: 0 auto;
    margin-bottom: 40px;
    -webkit-box-shadow: 1px 3px 63px 21px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 1px 3px 63px 21px rgba(0, 0, 0, 0.75);
    box-shadow: 1px 3px 63px 21px rgba(0, 0, 0, 0.75);
}

#myTd {
    width: 25px;
    height: 25px;
    background-color: #fff;
    padding: 0;
    margin: 0;
}

/* -------------------FOOTER---------------- */

.footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.7);
    min-width: 1200px;
}

/* -------------------JS CLASSES---------------- */

.hidden {
    visibility: hidden;
}

.border {
    border: 1px solid #1e1e1e;
}
JS
//Variable declarations
const myGrid = document.getElementById('myGrid'),
    reset = document.getElementById('reset'),
    form1 = document.querySelector('.form-1'),
    resultWrapper = document.querySelector('.result-wrapper');
let color = document.getElementById('colorChoice').value,
    color2 = document.getElementById('colorChoice2').value,
    gridheight = document.getElementById('gridheight').value,
    gridwidth = document.getElementById('gridwidth').value;


//"Delete Canvas" function
function deleteCanvas() {
    while (myGrid.firstChild) {
        myGrid.removeChild(myGrid.firstChild);
    }
}

// "Delete previous canvas & create new" function
function makeGrid(width, length) {
    let row, cell, i, j;

    deleteCanvas();

    // open loop to insert table row
    for (i = 0; i < length; i++) {
        // append table row and set row attribute
        row = myGrid.insertRow(myGrid.rows.length);
        row.setAttribute('id', 'myTr');
        // open loop to insert table cells to the new row and set cell attribute
        for (j = 0; j < width; j++) {
            cell = row.insertCell(j);
            cell.setAttribute('id', 'myTd');
            cell.classList.add('border');
        }
    }
}

// on submit -- get the user's inputs, inform him about the width & height of the canvas he has chosen and create canvas
form1.addEventListener('submit', function (e) {
    let gridheight = document.getElementById('gridheight').value;
    let gridwidth = document.getElementById('gridwidth').value;

    //reveal result section
    resultWrapper.classList.remove('hidden');

    if (gridheight >= 1 && gridwidth >= 1) {
        result.textContent = 'The Canvas you have chosen is: ' + gridheight + " x " + gridwidth + " !";
    } else {
        result.textContent = 'Please give a value to Grid Height & Grid Width to design your Canvas!'
    }
    e.preventDefault();
    //Create Canvas
    makeGrid(gridwidth, gridheight);
});

// Reset-btn -- Everything resets and starts from the beginning
reset.addEventListener('click', function () {
    // empty the input fields
    gridheight = "";
    gridwidth = "";
    // add class "hidden" so that resetBtn and result wont show anymore
    resultWrapper.classList.add('hidden');

    // reset colorpicker
    color = '#f6caf9';
    color2 = '#000';

    // delete canvas
    deleteCanvas();
});

// Color Canvas on mousedown - mousemove
function mouseMoveColor(e) {
    let color = document.getElementById('colorChoice').value;
    if (e.target !== e.currentTarget) {
        e.target.style.backgroundColor = color;
    }
    e.stopPropagation();
}
//On mousedown add mousemove event
document.getElementById('myGrid').addEventListener('mousedown', function (e) {
    this.addEventListener('mousemove', mouseMoveColor);
    e.preventDefault();
});
//On mouseup remove mousemove event
document.getElementById('myGrid').addEventListener('mouseup', function (e) {
    this.removeEventListener('mousemove', mouseMoveColor);
}); //End

//Right click resets cell color and prevents right click menu
$('#myGrid').contextmenu(function (e) {
    e.preventDefault();
    if (e.target !== e.currentTarget) {
        e.target.style.backgroundColor = '';
    }
    e.stopPropagation();
});

//Add/Delete all borders
$('.erase-all-borders-btn').click(function () {
    $('TD').toggleClass('border');
});

//Select border color
$('.form-2-2').submit(function (e) {
    let borderColor = $('#colorChoice2').val();
    $('TD').css('border-color', borderColor);
    e.preventDefault();
});

//Reset canvas style 
$('#reset-style-btn').click(function () {
    $('TD').css('border-color', '#000');
    $('TD').css('background-color', '');
    $('TD').addClass('border');
    document.getElementById('colorChoice').value = '#f6caf9';
    document.getElementById('colorChoice2').value = '#000';
});
Wed, 12/27/2017 - 07:02

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv