## DEV Community is a community of 901,019 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Pharaohnutz

Posted on

# 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.