Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Simon Vrachliotis
10,760 PointsPractice Exercise - HEX to RGBA converter
Following the course step by step, i had the idea to stop after this lesson and try to create a simple HEX to RGBA color converter, since this lesson introduced HEX values.
I ended up using a technique that has nothing to do with this lesson, but it was purely to get some practice with a self-made experiment.
I am sure the code is not clean or optimised, and most of it reside in the same function - so i would love your feedback on how to make the code better and more up to standards.
Also, i haven't bothered with validation of the input value (must be 6 characters from HEX values), as it was not the purpose of my exercise.
Here is the demo on a codepen: http://codepen.io/simonswiss/pen/bfhql
Feedback welcome!
5 Answers
Erik McClintock
45,783 PointsSimon,
I dig it! Very slick, and useful. I like the addition of the corresponding color being added to the top border of the div, as well. Nice touch.
I know you said your original intention for the project didn't include concerns for validation, but that should definitely be the next step to really flesh it out and make it a living, breathing, useful product. Spend some time learning the wonderful world (ugh...) of regex (Regular Expressions) and validate that a) a user is entering either three or six characters (no fewer, and no amount in between), and that b) the characters entered are only the appropriate ones for a hex code (a-f, 0-9).
Once there is validation, this would be a totally useful product!
Again, though, very nice project, especially for the current level.
Erik
James Barnett
39,199 Points- tweak the design on the converted box, too much text
- add a color picker
- validate colors
Simon Vrachliotis
10,760 PointsThanks James! Yeah the result div is a bit too text-based, i agree. The important thing in the first part was to get the Javascript working and output the result. It might do better with better styling and more straight to the point.
Thanks for the links - i'll look into that!
Simon Vrachliotis
10,760 PointsFor kicks, i have also made that the result div has a border-top color of the value entered in the converter - i thought that was a neat feedback for the user converting his code.
Simon Vrachliotis
10,760 PointsJames Barnett the HTML5 input validation worked really great - not sure if the way i implemented is correct but it works like a charm!
http://codepen.io/simonswiss/details/bfhql/
Erik McClintock i have also accepted 3-character HEX values but then this 3-character gets transformed in 6-character HEX so the transition to RGBA works smoothly.
Starting to work nicely!
Next step: the copy to clipboard functionality! :-)
Thanks again guys - great community!
James Barnett
39,199 Points> Next step: the copy to clipboard functionality!
I don't think that's necessary, just put it on in a text box, it's pretty simple to do it that way.
Moreover it's not possible without flash, but if you really insist on doing it you can check out: zero clipboard
Of course, you'll want to remove that button if the person is on mobile/tablet as they rarely have flash installed and it would be confusing to a user to have it not work when clicked.
Simon Vrachliotis
10,760 PointsCool thanks! I had in mind something like http://flatuicolors.com/ - but i now see it uses zero clipboard indeed :)
James Barnett
39,199 Pointshttp://hslpicker.com/ just uses text boxes to make it easy to copy.
Simon Vrachliotis
10,760 PointsWow this hslpicker puts my project to shame! Thanks for the link though - will learn from it, it's totally awesome!
Simon Vrachliotis
10,760 PointsSimon Vrachliotis
10,760 PointsThanks for the feedback Erik!
Yeah i thought it would be worth spending the time to set the field validation properly to have an actual working product! Will look into regex - i know some basics from .htaccess manipulations, but not much at all!
I also need to figure out how to copy the rgba value in clipboard when hitting the copy button.
Thanks again!
James Barnett
39,199 PointsJames Barnett
39,199 Points>Will look into regexUse HTML5 input validation:
^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$