JavaScript Planning Questions

Hello, I got through the card counting challenge after reading the answer on the hint after a few day of working.

I am not understanding how to plan out JavaScript to make more complex scripting work, could someone possibly help me wrap my mind around how to plan out a script to write?

I have been attempting to learn JavaScript for a while and this is one area that has been giving me constant problems and setbacks.

Any assistance would be greatly appreciated.

Thanks in advanced.

Hey @PhilGoodImages everyone has their own methods that work for them. It develops naturally over time and with practice and trial and error.

For myself I start with trying to get a clear picture of the project as a whole. Then I try and tease out the major sections. At this point I would code the framework of the major sections without any implementation. I would also wrap the whole thing inside the Module Pattern, which may or may not remain in place when I’m finished. Its useful for organizing and my projects tend to use it. ( and another perhaps better explanation of the Module Pattern )

I would make sure I have a bare bones ( or more ) html webpage to display my progress.

Now pick a place and start writing methods to implement some functionality, keep the methods tight and make sure they do only one thing. Name them carefully so you and others know what they do at a glance. Comment everything as you go - don’t wait until later, although there is a temptation to do just that.

Repeat until finished. Here is an example I have in a Codepen - it illustrates small methods, combining small methods to make other methods (code reuse) and the module pattern.

1 Like

Thanks for the info @rickstewart , I am just trying to understand more complex programming better, I can build a page just fine without any problems, but its adding functionality via scripting that I am at a loss for at the moment.

I am going to attempt to work through the previous challenges using you described method and see if that works out.

Thanks again for the info.

1 Like

For me, I always start with the logic, and ignore all HTML/CSS, unless it’s absolutely necessary to check my progress. I don’t like to get bogged down with that stuff and it just gets in the way. Plus, I may not know exactly how I’m going to do that until I finish the logic. I see a lot of beginners on these projects that spend hours designing the look of their app and then get stuck on the logic. To me that’s backwards.

But you’re asking about JS. My approach is to plan out what has to happen. For simple things, I do it in my head. For complex things I may write it down. For something like the card counting, I would need these steps:

  1. get passed the card
  2. check what the card is
  3. update card count
  4. based on current card count, return appropriate string

So, I start coding, and I test as I go. If it’s a tough problem, I work on it in codepen - it’s just easier to test and use the console (ctrl-shft-j, learn to use the console, it will save your life). As you get better, maybe you can skip testing certain steps as they are now easy, but if you have the slightest doubt, spend a minute and output something to the console to make sure it’s doing what you want. I got sick and tired of spending 45 minutes trying to track down a mistake that 30 seconds of testing would have prevented.

Step one: Did you get passed the card? Send it to the console to make sure you’re getting what you thought. If in doubt, do a typeof to make sure you know what you’re getting.

Step two: Can you check what the card is? How are we going to decide that. An if? An if/else? A chain of if/elseif? A switch? Which is the most appropriate. If I had any doubt, once I set up my decision structure, I would put a different console.log in each section and test it to make sure.

Step three: Can I update the card count? Put a console.log at the end of the function and see if it’s getting changed each time.

Step four: I have to build my return string. I know how to do that, right? This I would test in the calling function. I would write something like:

console.log(cc('K'));

Is that clear? Step by step. Test as you go. As you get better and your instincts get better, you can just do some of the panning in your head and skip some of the testing, but if you are having trouble, don’t hesitate, not for a second.

Rick’s advice about modularizing is good stuff, but you won’t need it for things like the card counter challenge. But it will be great advice for when you get to the intermediate projects, like the quote machine and weather app. It’s good to start thinking that way.

Thanks for the tip, I will try to use this method on one of the previous challenges.