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:
- get passed the card
- check what the card is
- update card count
- 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:
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.