Whether we admit it or not, one thing we as programmers wish for is to write code without errors 😅. But the Irony is that if there is an error-free code, the word “Debugging” would not even exist.

In this article, I will share my experience of how I got stuck for about a day in debugging a tiny problem in a project that I built. Let’s dive right into it. 😀

🐝 What is Debugging?

Debugging simply means finding the main/root cause of a problem and fixing that particular problem. It is an essential concept of programming that we as programmers must know how to do and it is something that we must encounter in almost all the projects we build.

📂 About the Project

The project I was working on was about building a portfolio website template for UI ( User Interface ) designers that has different sections. Which was kind of simple as I thought.

I was already done with the hero section of the website and I was already building the stat section when I ran into a tiny bug that I did not believe could be a problem at all.

The stat section was supposed to look like this 👇🏽

The problem was that I was trying to add the + sign in the JavaScript code with the code below 👇🏽

counters.forEach((counter) => {
      const updateCount = () => {
        const target = +counter.getAttribute('data-target');
        const count = +counter.innerText;
        const inc = target / speed;

        if (count < target) {
          counter.innerText = `${count + inc}+`; // HERE IS THE CODE
          setTimeout(updateCount, 30);
        } else {
          count.innerText = target;
        }
      };

      updateCount();
    });

I thought that the exact line of code I wrote above would work but this was the output I got 👇🏽

The irony of the whole thing was that I wasn’t getting an error from the console which made the debugging process really complicated for me.

So I remove the + sign from the code and added directly to the element on my HTML file. But that did not fix it too. I also tried looking up docs, and videos about it and still did not find anything that worked. So I left the project and decided to do something else.

👋🏽 The Solution

The solution came a day after I encountered the problem. And the funny thing was that the solution that worked for me was not inside the JavaScript or HTML file. Rather it was inside the CSS file 😅.

I just needed to add a pseudo after class to the two elements and added the + sign inside the content of the pseudo-class. 👇🏽

span {

        &::after {
          content: ('+'); // This is the code
        }
    }

💭 My Advise

Whenever you are working on a project and you run into a bug, try taking breaks and try reaching out to a friend or a community if you’ve tried your best to look for it and you will eventually get the solution to the problem.

CONCLUSION

That’s it guys, hope you learned something from my little experience and here is also a link to the completed version of the website 👇🏽

marthanportfolio

See you next week and have an amazing weekend 😀