What I learned making Scrimba's Colour Tool 🍭

After completing freeCodeCamp's JavaScript Algorithms and Data Structure's Certification, I was looking to apply JavaScript to a Frontend project. I remembered Scrimba's Build a color tool in vanilla JavaScript and decided to give it a go!

While Scrimba's beauty is it's interactive screencasts you can pause and code within, I wanted to work in VS Code. Only returning to the videos once I had completed the challenges.

I had a sweet reunion with CSS styling, after the at times brain-breaking exercises of my JavaScript bootcamp.

Then it was on to functions with the first real challenge of the course: Validate a Hex Code with JavaScript. I immediately thought of regex, and, surprise, surprise, mine worked!

I got cocky, thinking I'll be able to nail it out of the park. However, it was the things I struggled that taught me great lessons from this course. I'll outline 6 things I learned in this article

Lesson 1: Don't be afraid to use the learning materials

One part of the color tool was displaying the altered hex code in text on the page. I could show the user the correct colour to the screen with bracket notation, but had a pesky problem with the text displaying the hex code with NaN rather than the 0 I wanted. This lead to some, shall we say, odd codes like NaN7NaN.

Then I remembered I had training wheels! I un-paused the video and found the solution: .substring()! Not only was the proper colour showing, but the returned hex was correct and not gobbledygook!

Lesson 2: KISS - Keep It Simple Stupid

When converting RGB to hex, you need to place a zero in front of either of the red, green or blue values if it came back with only one character, so 9 would be 09.

I thought one of the new methods I had learned would do the job. I spent hours reading documentation and trying to cobble together complex series of functions with: map, filter, reduce. None worked until I remembered about ternary operators. Solved with one simple line: pair.length === 1 ? "0" + pair : pair;!

Lesson 3: Scope is important

My next problem occurred through one of my stretch goals: creating a copy button. I tried out solution after solution, even the deprecated document.execCommand('copy'), but nothing worked. All my tests were getting undefined. Somehow when I was spinning my wheels, I actually thought of scope. And when I read my code, there was my alteredHex imprisoned within a function. Again a one-liner, let alteredHex; placed above my function saved the day!

Lesson 4: Account for asynchronous events

I thought I was finally done my project... Hahaha!

The copy to clipboard function was working, but with a catch. Users would have had to click the copy button twice as the function seemed to be always one step behind. I even thought of a hacky solution like calling the function twice, then remembered asynchronous events:
copyBtn.addEventListener("click", async () => {
await navigator.clipboard.writeText(alteredHex);
alert(Hex code ${alteredHex} was copied to your clipboard)
});

Lesson 5: Don't forget the basics

I used this project mainly to practice my JavaScript, but I neglected the basics! When working on accessibility for my page, I found I had completely forgotten to add :focus and :hover states.

I learned this when CSS was my focus, but lost sight of this important principle. While it didn't take too much to add them, I did feel like a fool for saving it until the end.

Lesson 6: 'Simple' is never simple

I wanted to add a gradient to my range slider as a visual clue. I thought it would be an easy thing; I know gradients, right?

Partly correct, it was easy to add a dark to light gradient, but what happens when the user switches to darken the colour? Now it's just a pretty gradient that doesn't help the user ahem, use, it.

The solution took a fair bit of research, but I found out I could declare the dark to light gradient in the root, then switch it in JavaScript with:
root.style.setProperty("--gradient", "linear-gradient(90deg, rgba(213,213,219,1) 0%, rgba(87,90,94,1) 60%, rgba(0,0,0,1) 100%)");

While I had 'learned' JavaScript basics, I'm just starting to apply it to frontend development. And it's awesome! Working on this project not only gave me a portfolio project, or, even just, practice working with the DOM. It taught me to about how to approach projects, and how important concepts, that I had breezed over during my JavaScript certification, really are important.