Pixel Art Maker
Budget: $30 – $250 USD
Features:
- 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.
Note: You need to edit the HTML and CSS files to make your project work.
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.
Code follows style guidelines: CSS Style Guide HTML Style Guide JavaScript Style Guide Git Style Guide.
- 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.
Note: You need to edit the HTML and CSS files to make your project work.
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.
Code follows style guidelines: CSS Style Guide HTML Style Guide JavaScript Style Guide Git Style Guide.