Pixel Art Maker

A single-page web app that allows users to draw pixel art on a customizable canvas

Open and view the Project using the .zip file provided or at my Github Repository.

The project is also hosted on Github.

Table of Contents

• Getting Started
  • Tools Required
  • Installation
• Development
• Features
• Running the App
• References

Getting Started

The primary task is to implement the makeGrid() function, that dynamically creates a grid that the user can interact with.

The starter code can be found in this repo provided by Udacity.

The project will be evaluated by a Udacity code reviewer according to the project rubric

This is how the canvas will look:

Tools required:

• jQuery (Javascript Library) for easier coding of javascript.
• JS Beautifier to Beautify JS.
• Online Markdown Editor to test README.md.

Installation

No additional installation is required for this project

Development

• Open js/designs.js and implement the following functions:
  • makeGrid to create the Grid
  • addClickListeners to add click events to the cells
  • Function to add a new row
  • Function to add a new column
  • Function to remove a row
  • Function to remove a column
  • Function to reset the grid
  • Function to set and update the color from the color-picker
  • Function to handle the form submit

For details now how these functionalities have been implemented, refer the source code.

Features:

• Input value of rows and columns and press submit.
• Add or Remove Rows and Columns with specialized buttons.
• Add colors to cells of the grid.
• Reset the Grid

Running the App

• Open the project through the .zip file provided and extract the files.

  Open index.html in the browser of your choice.

References

No external resources were required for this project