What I learned making Scrimba's Colour Tool 🍭
Tags: javascript, webdev, codenewbie
Published: 2022-05-03 21:12:37

After completing [freeCodeCamp's JavaScript Algorithms and Data Structure's Certification](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/), I was looking to apply **JavaScript** to a **Frontend** project. I remembered [Scrimba's Build a color tool in vanilla JavaScript](https://scrimba.com/learn/javascriptcolortool) 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

![gradients for both lighten and darken](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rl1doeln7wnbrode2ina.png)

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