Project Overview – colorCreator

Here is the link of the project I will be discussing –

Screenshot 2014-11-23 15.37.11

http://codepen.io/mstucker/details/mydNob/

So I wanted to make something with the little bit of Angular that I had learned.  This was for two reasons:

1. During the coding conference I went to (Nodevember in Nashville, TN) one of the main things I took from it was to create projects at each step of the process.  Even if you feel like you haven’t learned that much, you should create something with whatever you have learned.

2.  I had just completed the first two lessons on AngularJS on Codeschool and realized that the second lesson felt really over my head.  I felt like if I did a small project using Angular that it might would allow more information to sink in.

So I knew that Angular was great for two way data binding, and that it was immediately showing changes that occurred (which I thought was really cool).  So I decided to create a colorCreator, where you moved sliders for red, green, and blue values to create a new color.

I felt pretty equipped to do most of the project.  I started about creating the HTML and CSS (go ahead and joke about how poor the actually project looks.  I know.  But you get what I am saying.).  Then the Angular part came up.  I remembered how to bind the information from one thing to another.  For example, most tutorials show you binding the text input to some location on a page.  It wasn’t too difficult to look up and figure out how to create a slider that Angular would bind to a value underneath the slider.

The struggle came from implementing the slider to change the rgb values.  I knew I could just use HTML styling to change the individual div of the box I was wanting to change, but I wanted to take the values and make a variable from them.  I ended up going down a crazy rabbit hole of $watch and $apply and fixtures and so many other things.  I got way over my head.

So I just went with using HTML styles.  Even though it is recommended to only do styles in the CSS and leave the HTML for structure, I went ahead with using AngularJS to style the HTML div instyle .  I know that there are other ways to do this because I looked and read through many of these.  But most felt over my head in trying to use.

I am really pleased with how it turned out.  Let me know what you think!  Leave a comment or just tweet me @mdownt.

Posted in Blog Posts, Web Development Tagged with: , ,