Skip to Content
Level Up; Problem Solving For Coders

Level Up; Problem Solving For Coders

By: Ryan Duer

Posted on  - Last updated:

Check out this fun, easy to solve 3rd grade math puzzle presented to teach you how to solve problems like an Engineer. The problem many coders have when faced with a problem that requires code is that sometimes the problem seems so big it’s hard to know where to begin. This exercise is designed to help you learn how to problem solve as a coder by breaking problems down into smaller, digestible problems with code comments.

Commenting Code Using 3rd Grade Math

This exercise allows you to think of code like a third grade math word problem. How do we solve bigger problems? Well, as I tell my third grader, we just break them down into smaller, easier to solve problems. This exercise is meant to help you think about coding and projects with a problem solvers mindset. My dad always says, “How do you eat an elephant? One bite at a time!” We can think of a coding problem in this same way. This can give you confidence to code more complex problems. Using comments to guide your own code also makes your code easier for others to read.

Problem Setup

To problem solve as a coder, we will want to start with a data set. Below is our data set. Seems like we have some info here we might need and maybe some we don’t. We’re going to have to use this data set to problem solve.

List of summer items for sale:

Below is a list of items for sale. We’ll need these to complete our answers.

  1. Umbrella: $37
  2. Flip flops: $12
  3. Bucket: $8
  4. Sunblock: $6
  5. Swim trunks: $19
  6. Sunglasses: $40
  7. Swimsuit: $23
  8. Goggles: $15

Math Question:

  1. How much more does the umbrella cost than the swim trunks?
    • Answer: The umbrella costs $__ more than the swim trunks.

Breaking The Problem Down, Problem Solving For Coders

How do we break this down into smaller problems? Well to answer this question it looks like we need three things. We need to know the value of the umbrella, the value of the swim trunks, and we need a math problem to calculate how much more the umbrella costs than the swim trunks.

Below you can see I have the following three corresponding comments for our code:

//Find out price of the umbrella

//Find out price of the swim trunks

//Calculate how much more the umbrella costs
HTML and JS codepen shows the Problem in an h2 tag and the question as a list item. The JS side shows the three comments listed above

I’ll store each of these values inside of a constant variable like this:

//Find out the price of the umbrella
const umbrella = 37

And the swim trunks will be stored like this:

//Find out the price of the swim trunks
const swimTrunks = 19

Uh Oh, my problem isn’t so straight forward after-all, now what?

When I get to the calculation part, I run into a problem I hadn’t considered. I don’t want to just calculate the answer, I want people to be able to see the answer once it’s calculated.

So now that it’s time to create a function I realize my function has to do more than simply calculate an answer. The problem is starting to feel overwhelming. That is until I remember to break it down into smaller parts.

Problem Solving For Coders Main Concept; Break It Down Further

Before I can calculate my answer, I need to figure out a few more things and for that I need to break my problem down further.

I don’t just want my function to calculate the answer right? I also want the function to print out on the front end. For that I need some kind of trigger to make this function work.

I’ll add a button with an onclick attribute and I’ll set my function call to the onclick:

<li class='ansOne'>The umbrella costs $__ more than the swim trunks.<button onclick="calc()">Get Answer</button></li>

I set classes on the elements I want to manipulate:

I need to also set some variables to be used in my function, so I will add classes to the elements in my document that I want to use. I need to alter the unordered list with my answer and the list item that holds my answer as well.

<li>
  How much more does the umbrella cost than the swim trunks?
  <ul class="questOne">
     <li class="ansOne">The umbrella costs $__ more than the swim trunks.   
        <button onclick="calc()">Get Answer</button>
     </li>
  </ul>

The comments at the top of my JS file:

I will now need to create more comments so that I can grab these elements and utilize them in my function. 

//grab the answer unordered list

//grab the empty answer element

//grab the empty answer text

Now let’s store these values in constants:

//grab the answer unordered list
const listQuest = document.querySelector('.questOne');

//grab the empty answer element
const listAns = document.querySelector('.ansOne');

//grab the empty answer text
const listAnswer = document.querySelector('.ansOne').innerText;

I’ll add the next 3 comments inside my calc() function to help guide me.

Now back to the actual function. Here, I have to create some more comments so I know what I want to do inside my function. 

function calc() {
//replace the current text with the new answer

//remove the blank answer list item from the html

//insert the complete answer
}

Want to learn more about the Fundamentals of Functions? Check out our article here to start writing functions like a Pro!

Under my first comment I can store a value that I’ll use in my third comment. I’ll add ans as an parameter to my function since I’ll be calling this only in my function.

function calc(ans) {
}

I’ll set the value of ans to be a string with the value of umbrella minus the swim trunks to replace the underscore text.

//replace the current text with the new answer
  ans = listAnswer.replace('__', `${umbrella - swimTrunks}`);

I’ll remove the list item that holds the underscore text

//remove the blank answer list item from the html
  listAns.remove();

And finally, I’ll insert a new list item that holds the ans text above.

//insert the complete answer
  listQuest.insertAdjacentHTML('beforeend', `<li>${ans}</li>`);

My function now looks like this:

//Calculate how much more the umbrella costs
function calc(ans) {

//replace the current text with the new answer
  ans = listAnswer.replace('__', `${umbrella - swimTrunks}`);

//remove the blank answer list item from the html
  listAns.remove();

//insert the complete answer
  listQuest.insertAdjacentHTML('beforeend', `<li>${ans}</li>`);

 }

The Question Before:

How much more does the umbrella cost than the swim trunks?

  • The umbrella costs $__ more than the swim trunks.

The Answer After:

How much more does the umbrella cost than the swim trunks?

  • The umbrella costs $18 more than the swim trunks. 

Conclusion

And that’s it! Hopefully you have a better understanding of problem solving for coders and know how to tackle big, overwhelming problems that you face. In this article we’ve successfully broken down a third grade math word problem into smaller bite sized problems and we’ve solved each one using code comments. Now we have a working JS function that site visitors can utilize to calculate the answer to Question one for them.

Want to find more ways to make your coding life easier? Check out our article here.

Bonus:

Can you solve the second math problem in the codepen below using code comments to break down the problem?

Photo by Wes Hicks on Unsplash