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 () => {
Hex code ${alteredHex} was copied to your clipboard
await navigator.clipboard.writeText(alteredHex);
alert()
});
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.
Top comments (0)