Building a Palindrome Checker 🚀

Introduction

Hi, everyone! My name is Karan Mhetar, and today I'm excited to share my journey of building a simple yet intriguing project: a Palindrome Checker. A palindrome is any word or number that reads the same forwards and backwards.

The Challenge

While I was working in my dad's office, one of his friends gave me a task to create a palindrome checker. The goal was to take user input and determine if it's a palindrome or not. He was very keen on figuring out the logic part, so I took a pen and paper to jot down what I could do.

Developing the Logic

I initially got distracted by designing the CSS and adding different elements, which didn’t turn out pretty at all. Then, I thought about what conditions the computer needs to check to complete the task. I realized that checking if a text is a palindrome is basically checking if its reverse is the same.

To implement this, I used:

• .split(''): to split the string into an array of characters.




• .reverse(): to reverse the array.




• .join(''): to combine them back into a string.




• if condition: to check if the reversed string is the same as the original. If it was false, it wasn’t a palindrome. If it returned true, it was a palindrome.

Debugging the Code

After doing all this, I received an error. It wasn't working. I spent two hours trying to solve it but nothing worked. Finally, when my dad came, I asked him for help. He said that fixing errors is a major skill developers need and is essential. We used console.log to find out where the issue was coming from and finally narrowed it down to the if condition. I had accidentally used == instead of ===. It was a real learning lesson for me. I wasted my entire day on such a silly problem that could have been resolved with one single key click. Yeah, I know it was a stupid mistake, but now I can actually laugh about it.

Adding Some Flair

The next day, I still wasn’t satisfied with my project. I felt it was too boring. I was curious about learning animations and thought of adding one to the project as well. I found a cool 360-degree horizontal rotation animation on W3Schools. I thought it could work perfectly for my palindrome project (it didn’t go as well as I thought). I tried to put the animation onto the text the user would input, making it spin around to reverse, and if it stayed the same throughout, it was a palindrome. To find the source code of that animation, which wasn’t given as an example, I had to inspect the element and see what had been done. I used that code and experimented with mine until I got it. Don’t hesitate to use AI tools and other resources. They are there to help you. I finally put the animation with some help, but it didn’t exactly come out as I had expected. It still looked nice though, so I kept it.

Feel free to try out my Palindrome Checker on GitHub. Let’s learn and grow together!