The “Puzzle Approach” to Coding

Recently, I’ve been taking the “Puzzle Approach” to most of my problems.. especially as I’ve begun to learn how to code.

In this article, I will talk about my approach for when I get stuck as I am coding. I will be using JavaScript for this example, but I believe it can apply to a lot of different languages (if not all). It also could apply to life!

Anywho, let’s get into this… “Puzzle Approach.”

WHAT EXACTLY IS THE “PUZZLE APPROACH”?

The “Puzzle Approach” is a way of looking at a problem in relation to a puzzle… Makes sense, right? haha.

Think about the process of putting together a puzzle from start to finish… you look at the box, proceed to dump out all the pieces, look for the center pieces and things that connect right off the bat, then spend time researching or looking through the remaining pieces and try to make sense of everything. Once you start to get the hang of it, you can start piecing together sections and eventually you’ll start to connect one section to another, making a beautiful puzzle!!

Well, I’ve taken this approach and used it to solve this coding problem… Let me show you step by step!

1. LOOKING AT THE BIG PICTURE

WHAT SHOULD THIS DO AND WHAT SHOULD THIS LOOK LIKE

When looking at a puzzle, it’s easy to see the big picture because the box tells you what it will look like when it’s finished. With code, it’s not as straightforward as a picture telling you what the code should look like and do, however, by asking “What should this do” and What should this look like”, it gives you a good place to start.

So, here’s the coding example we are going to use:

“ Write a function within JS that will create a grid after given one parameter. It will have an x-axis labeled with #s and a y-axis labeled with letters (A-J).”

What should this do: Create a grid based on a size parameter

What should this look like: A grid that has an x and y axis based upon the size and will be created using a function of some sort.

This creates a picture in my head of what it should look like and what it should do… now, time to dump out all the pieces..

2. DUMP IT OUT

BRAIN DUMP ALL OF THE NECESSARY PIECES YOU ARE AWARE OF

Alright, much like a puzzle, we are going to dump out all the necessary pieces we are aware of before we start building.

This is how I would “DUMP IT OUT”:

• A function that takes one parameter
• Outside variable that stores the letters A-J
• Need somewhere to store the generated grid (empty array)
• Push grid to empty outside array
• Return grid

This step can be more complex depending on your skill level, but since I am still a novice, I will be more basic with the amount of knowledge I can immediately recall from the dome. Now, that we have dumped out all the necessary pieces, that we are aware of, we can start putting the pieces together!

3. PUTTING THE PIECES TOGETHER

TIME TO START CONSTRUCTING

This part is one of my favorites. It’s where you now get to go and make it happen!

Within my code, I created a function that took in one parameter, created two outside variables (one that stores the created grid and one that holds the letters we will use for the y-axis), and a way to push the generated grid to the empty outside array… like so:

If you are an experienced coder, you may look at the code above and be like “what the heck is this??” Look, I’m new, so don’t be judging my thought process. We will improve this… WITH RESEARCH!

4. GET YOUR QUESTIONS TOGETHER AND RESEARCH

WHAT ARE YOU MISSING? WHAT WILL YOU TACKLE NEXT?

Now that you’ve created a good foundation to work with, it’s time to really start understanding and working on little sections of the puzzle / code. At this point, you may be constantly looking at the box to try and see what colors are in what areas and/or what character within the puzzle you are trying to build… but what you are subconsciously doing is asking yourself “what is missing… what part should I tackle next?”

SO, now is the time to gather your questions so you can begin to find the answers.. my questions were:

• what kind of code will help create a function?
• what kind of loop (for, for of, while) should I use for this?
• how can I call use the gridLetters variable within my function

And with these questions… I begun to research using MDN, Google, and other resources!

As you are researching your questions, it’s important to not just look how what they did, but HOW and WHY they wrote the code they did. This will deepen your understanding and will help push your progression forward!

5. EXPERIMENT AND MAKE IT WORK

START MASHING THOSE PIECES TOGETHER!

After you’ve researched your questions, I am sure you found a bunch of useful information… heck, you may have even found a code snippet that fits exactly what you are looking for and that’s awesome! As long as you understand what and why you did what you did, that is all that matters.

Through researching different ways of creating grids, for loops and why they are useful, calling alphabetical letters and using them within my grid labeling… I came to this end code solution:

Upon my research, I found that using two parameters (column and rows) within the function, along with using two for loops that use the size parameter to continue to create rows/columns as long as it is not larger than the size, was the best solution. Then, I went ahead and in the second for loop, used back-ticks to access the alphabet variable, adding it with the column index + 1 as it goes up, so that it would output things like “A1, A2, B1, B2… etc”

6. ADMIRE YOUR WORK!

YOU DID ALL THAT WORK… WHAT DID YOU LEARN??

NICE! Crossing the finish line is always a great feeling. Now, it’s time to admire the beautiful puzzle/code that you have put together.

A way that I like to pay myself on the back and appreciate the work I put in is by reflecting what I have learned from this problem so that I can keep it handy and dandy for next time!

In this coding exercise, I learned:

• How to properly use for loops (and multiple for loops within a function)
• How to create a grid based on a single parameter
• How to create alpha-strings ( may not be the proper term, but I like it )

WOOT WOOT!

This “Puzzle Approach” can be used for puzzles, coding, and so many other areas of life. Give it a shot and let me know if you found this helpful!

Until next time… PEACE!!