About a month ago, I subscribed to Scrimba and started working through their Frontend Developer Career Path course. So far, I’ve really been enjoying it. The course is super well-structured, and the challenges strike the perfect balance—not too easy, not too hard. It’s been great for building muscle memory, which is something they emphasize throughout the lessons.

‍

Anyway, after skipping the HTML and CSS sections, I finally reached the JavaScript solo project path. The task? Build a password generator that spits out 15 random characters from an array. I was excited to get started!

‍

The Challenges I Faced:

The project started out well. I knocked out the HTML and CSS in about 30 minutes because, honestly, I just wanted to dive into the JavaScript as soon as possible. The first thing I did, as always, was grab all the DOM elements I needed. That part was a breeze—probably the easiest thing when it comes to writing JS code.

‍

Next, I moved on to the core of the project: creating the generatePassword function. The challenge specifically asked us to limit the password to 15 characters, so I set up a loop that ran < 15 times. Everything seemed fine until I hit the button to test it. And... the password generator only showed me one character instead of the full 15.

‍

At first, I tried Googling the issue and checking Stack Overflow, but I couldn’t quite pinpoint the problem. Finally, I asked ChatGPT to break it down for me (thanks, ChatGPT!), and that’s when I had my "a-ha" moment.

‍

What I Learned:

1. Empty Variables Are Crucial:
   My initial mistake was not creating an empty variable to store the generated characters. Without that "container," the loop just overwrote the value on every iteration, leaving me with only the last character. Once I added an empty variable, everything clicked. I’ve always struggled to grasp why and when to use an empty variable, but I’ve started thinking of it like an empty box. It’s there to store whatever I need later. Without it, there’s nowhere to store the accumulated data—like the 15 random characters I needed.
2. The Importance of return Statements:
   Another thing I missed was the return statement. Without it, my function was just returning "undefined." I realized that return is how you send a value back to where the function was called, which was crucial for making my password generator work. This is still something I’m wrapping my head around, but I feel like I’ve taken a big step forward in understanding it.

‍

Summary:

This password generator project might be simple on the surface, but it covers so many fundamental JavaScript concepts—DOM manipulation, functions, loops, Math.random, and onclick events. By the end, I had a much clearer understanding of two concepts I’ve struggled with: empty variables and return statements.

‍

I feel like I’m finally starting to "get it" when it comes to empty variable. I still more practice when it comes to return statements though. But, with more and more practice, one day, I will finally get it too!

‍

‍