How to find a palindrome: my FCC solution

Hi there, 👋
As of the time of writing, I only have one FreeCodeCamp Certificate, Responsive web design with HTML and CSS.
(It's on my LinkedIn page). That doesn't accurately reflect my skills cause I use more JavaScript these days. So, I'm on a quest to get the other FCC (FreeCodeCamp) certifications to increase my skill and credibility as a developer.

This is a post in a new series I'll be putting up. My quest to get the remaining FCC certs (or as much as I can get) and add to my portfolio. I know FCC certs are not professionally recognized but they are credible and you get to build projects that can be recognized (depending on how you build them). Okay, enough intro, let's dig in.

The problem:

I'm on the home page for the JavaScript Algorithms and Data Structures Certification.

And the first required project is a to build a palindrome checker.

What is a Palindrome?

A palindrome is a word or phrase that can be read the same way forwards and backwards, ignoring punctuation, case, and spacing.

How I approached the problem

It didn't seem too hard and I thought out the process (and tested it on VScode) before coding the solution.
First, you define your input and output like so:

    <div id="wrapper">
        <h1>Palindrome Checker</h1>
        <form action="">
            <input type="text" id="text-input" name="text-input">
            <button id="check-btn">Check</button>
            <p id="result"></p>
        </form>
        <div class="info">
            <p>A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</p>
        </div>
    </div>

You can add styling, these are the styles I used:

#wrapper {
    width: 100vw;
    height: 100vh;
    background-color: #1f153d;
    overflow: hidden;
    color: white;
    margin: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
form {
    text-align: center;
    padding: 10px 20px;
    border-radius: 10px;
    background-color: white;
    color: black;
}
button {
    background-color: #1f153d;
    padding: 10px;
    border-radius: 5px;
    color: white;
}
.info {
    padding: 10px;
    margin-top: 20px;
    border-radius: 10px;
    background-color: green;
    width: 50%;
}

It should look like this:

For the functionality, we reference all DOM elements we'll be using:

const textInput = document.getElementById('text-input');
const checkBtn = document.getElementById('check-btn');
const result = document.getElementById('result');

Then listen for clicks on our button:

checkBtn.addEventListener('click', () => {})

inside the function we ensure the input is not empty, then we call the function isPalindrome() to check if the string is a palindrome.

checkBtn.addEventListener('click', () => {
    const text = textInput.value
    if (text === "") {
        alert("Please input a value")
    }
    if (isPalindrome(text)) {
        result.innerHTML = `${text} is a palindrome`;
    } else {
         result.innerHTML = `${text} is not a palindrome`;
    }

});

Let's implement the isPalindrome function below.

function isPalindrome(text) {
    // Convert to lowercase to get rid of casing
    text = text.toLowerCase();
    // Split the string by all white space characters into an array 
    text = text.split(/\s+/);
    // Join the array to get rid of the white space
    text = text.join("");
    // Using this regular expression, remove all punctuation marks
    text = text.replace(/[\.\(\)\[\]\{\}<>_,!?"':;-]/g, "");
    // Finally perform your test
    let reversedText = text.split("").reverse().join("");
    return reversedText === text; // return the result
}

The function first convert's the string to lowercase, it then removes the white space and the punctuation. It then reverses the string and compares the reversed string with the original.
If you spells the same way, the function returns true else it returns false.

So, that was how I completed the first of 5 certification projects required for the FCC certificate. If you've taken the course or earned the certs, let us know in the comments. You've got a different view let us know in the comments.

I'm a Full Stack JavaScript Developer who's job searching, open to freelance and working on passion projects. Want to learn more about me, check my LinkedIn, also check out my projects on GitHub