The Thinking Process and Logic to Problem Solving

At the very beginning of my coding journey, whenever I had to solve a lab without very similar references, I found myself spending at least 10 mins panicking. My brain was blank and I didn’t know where to start. I didn’t like that. I think it will be good for me to sit down and make it clear how my problem-solving logic and thinking process should be. So that I can refer to it every time I encounter a problem that is outside my knowledge scope. And I can keep on refining it as I code more.

I hope this post will be helpful to some of the beginners like me. It doesn't need to be my process if you don’t think it makes much sense to you. But it is good to think about what kind of thinking process fits you best, make it clear and refer to it whenever you feel stuck.

Photo by Patrick Perkins on Unsplash

Thinking Process:

1. What is given?
2. What needs to be returned?
3. From where I am to go to where I need to be, what needs to be done?
   What tools and techniques are available to me?
4. After a solution is found, can it be shortened? If yes, is it better shortened? (optional)

Let’s take this DOM challenge lab as an example.

https://learning.flatironschool.com/courses/3168/assignments/118505?module_item_id=244634

Let’s look at 1. What is given?

I’m given an HTML file when opening it, it shows above. ( it is what inside the blue box of the 1st photo)

2. What needs to be returned?

This lab is a little different from a normal lab, it let you visually see the end result. When I try to interact with the page, it shows:(the things in the red box of the 1st photo)

1. Static counter ==> a counter that counts up 1 every second once the page loaded
2. Static “ — ” & “+” button ==> make the counter — 1 or +1
3. static “heart” button ==> print out how many times I liked the timer base on the number on the timer.
4. static “pause” button ==> pause the timer, disable the other buttons, itself become “resume”. click again, everything back to what it was.
5. static comment box ==> takes input and prints out the input under “Comments”.

3. From where I am to go to where I need to be, what needs to be done?
What tools and techniques are available to me?

This step requires us to look into each needed transformation above and get them done one by one.

Side Note: Do the easiest task first. After reading everything, the comment box probably would the easiest as I did a very similar task during the lecture, so, I did solve it first. Choosing an easier problem to solve first is less frustrating and builds up confidence. For the sake of staying on the topic of solving problems that are a bit outside our knowledge, I choose the 1st requirement as the example.

Static counter ==> a counter that counts up 1 every second once the page loaded

Tools: base on the hints on the page, they should be: setTimeout(), setInterval(), clearinterval() . If there were no such hits, google related keywords. In this case, something like “javascript increment timer”, check the result, and refine the search from there. Not only Google, but YouTube can also be very helpful as well.

Google the 3 methods and mark down all the useful websites. Read through the documentation, write down whatever popped into mind. For example, the documentation example is when you click a button, the timer starts to count, how can I make it start when the page is load?

What needs to be done:
(During the process, test every step in the console as the codes are being written)

1. Very first thing, grab the element that you need to make a change to and assign a variable to it. This case here is the counter.
   const counter = document.querySelector(‘#counter’);
2. Make the timer automatically count up each second as the page load. After reading the documentation of the tools, I know I need to use setInterval(), and it takes in a callback fuction and the time interval as arguments. Defining the callback function is key here. Define it first ==> it needs to increase totall second count by 1 each 1 sec from 0, and then change the counter’s textContent to whatever the totall second count is
   let totalSecond = 0;
   function myTimer() {
   totalSecond = ++totalSecond;
   counter.textContent = totalSecond;
   }
3. Define setInterval();
   let countingTimer = setInterval(myTimer, 1000);

A few other things that might be helpful:

1. Pay attention to what is being returned. What is the data type, is it an array? An object? A value? true or false? undefine? Can I use it to better my code?
2. Console.log is a good friend. Whenever there is confusion, console.log everything.
3. When feeling like there is a mess in your head, write everything down, no matter how small it is.
4. Separate the answer sheet and the thinkingProcess sheet. thinkingProcess file can be very difficult for people to read as all your thinking is there, a lot of green(comments), it can be messy as well. Better to copy and paste your working code back to your answer javascript file in a clean manner. Write comments there when you think it is easier for people to understand.
   My thinkingProcess.js looks something like this :

My answer sheet looks something like this

If anyone is interested in what my thinkingProcess is like for other requirements of this lab, I put my tp.js here. Some of them can get a bit more challenging than the 1st one that I just shared. I left out the heart button one as I needed help from my instructor, not completely my own thinking.