Pixel Art Maker

• Nanodegree: Intro to Programming
• Module: JavaScript

Project Summary

The project is a pixel art maker.
In this project, I have used my front-end programming skills including:

• Accessing the DOM using methods of the document object
• Declaring functions and attaching them to DOM objects as event listeners
• Writing nested loops and using loop variables

Main technologies

• HTML
• CSS
• JavaScript

Project Requirements

• The user can create a canvas of any (reasonable) size.
  • Entering whole numbers in the "Height" and "Width" fields, and submitting the form, causes an empty grid to appear on the page.
• The user can color the pixels in the grid.
  • Choosing a color from the color selector and clicking on a grid square causes that grid square (and only that square) to change color.
  • Event listeners are properly added to the grid squares (and not to the border or the table itself).
• The user can reset the grid to a blank state.
  • If there are already colored squares in the grid, clicking the Submit button clears them out.

Code Quality

• The script.js JavaScript code works with the provided HTML and CSS files.
  • The script.js file is properly linked to the HTML file, and loading the HTML file shows the correct functionality for the application.
• Code is neatly formatted and commented.
  • Code is correctly indented, uses descriptive variable names for long-lived variables, and has descriptive comments.
• Code runs without errors in the JavaScript console.
  • Open the Developer Tools console tab, then create a grid and color some squares in it.
    You shouldn't see any error messages.

Install

• Clone project:

git clone https://github.com/Shaurav43/pixel-art-maker.git

• Run project on browser: open index.html

License

pixel art maker is MIT licensed.