Skip to content

JavaScriptErika/pixelMaker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Pixel Art Maker

A web app that allows users to draw pixel art on a customizable canvas 🎨

To run this project locally, make sure to: yarn install or npm install and yarn build!

This is the final project for The Udacity Google Scholarship!

Course Requirements

  • Dynamically set the size of the table as an N by M grid.
  • Choose a color.
  • Click a cell in the grid to fill that cell with the chosen color.
  • Implement a makeGrid() function, that dynamically creates a grid that the user can interact with.
  • Implement while and for loops to clear and create the grid dynamically

My Added Personal Challenges

  • Code project with vanilla JS (as opposed to jQuery)
  • Do not use starter files the course provides
  • Use CSS Grid for layout (using FlexBox for grid items is ok)

The Journey of My Project

Setting up Webpack

As an extra challenge to myself, I decided set up a dev environment and not rely on CodePen's convenience for the sake of avoiding webpack. I successfully set up my environment to transpile ES6 to ES5, compile Sass to CSS, and automatically update my HTML and pop it into my dist folder with the updated links to my JS and CSS. I am absolutely ecstatic to create this environment. Webpack has always been intimidating to me - and to be quite honest - it still is. I am happy to have pushed through and do it! With lots of googling and tutorials, I was able to figure it out and understand what exactly is going on. Webpack is still tough though, and I agree it's not user friendly as there are so many dependencies upon dependencies to install, and don't forget the plugins that rely on those dependencies! It gave me great perspective on the growing pains of Webpack!

About

Web app that allows users to draw pixel art on a customizable canvas

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published