Palindrome checker in JavaScript I've built a Palindrome checker in JavaScript. It's fairly simple.

I'm still learning JS and am looking to learn.

So I would love hear ideas on how to improve the JavaScript in this. Like more efficient ways to resolve the task of checking for Palindrome.

Source code is below. Link to CodePen is her: http://codepen.io/MarkBuskbjerg/pen/JWMWwN?editors=1010

HTML:

&lt;div class="cover"&gt;
    &lt;div class="container header"&gt;
        &lt;div class="row row-margin"&gt;
            &lt;div class="col-sm-12"&gt;
                &lt;h1 class="text-center"&gt;Palindrome checker&lt;/h1&gt;
            &lt;/div&gt;
            &lt;div class="col-sm-12"&gt;
                &lt;p class="text-center text-uppercase"&gt;A nut for a jar of tuna&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="container"&gt;
        &lt;div class="row row-margin"&gt;
            &lt;div class="col-md-2"&gt;

            &lt;/div&gt;
            &lt;div class="col-md-8"&gt;
                &lt;textarea class="col-md-12" id="inputPalindrome" rows="5"&gt;Borrow or rob?&lt;/textarea&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row row-margin"&gt;
            &lt;div class="col-sm-3"&gt;

            &lt;/div&gt;
            &lt;button id="checkPalindrome" class="btn btn-default btn-lg btn-block col-sm-6 col-sm-offset-4" type="submit"&gt;Check palindrome&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="container"&gt;
        &lt;div class="row row-margin"&gt;
            &lt;div class="col-md-2"&gt;
            &lt;/div&gt;
            &lt;div class="col-md-8 text-center"&gt;
                &lt;div id="notification" class="alert alert-info"&gt;Palindrome has not been checked yet&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;




CSS:

.cover {
  height: 100vh;
}

.row-margin {
  margin: 4vh auto;
}

body {
  background: #FF4E50;
  background: -webkit-linear-gradient(135deg, #FF4E50, #F9D423);
  background: linear-gradient(135deg, #FF4E50, #F9D423);
}

.header {
  color: #fff;
}

h1 {
  font-family: "Pacifico";
}

.btn-default {
  background-color: black;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
 }


JavaScript:

var checkButton = document.getElementById("checkPalindrome");

function isPalindrome(str) {
    str = str.toLowerCase().replace(/[^a-z0123456789]+/g,"");
    var reversedStr = str.split("").reverse().join("");
    if (str == reversedStr) {
        return true
    } 
    return false
}

checkButton.addEventListener("click", function() {
    var palindromeInput = document.getElementById("inputPalindrome").value;
    var palindromeReturn = isPalindrome(palindromeInput);
    if(palindromeReturn === true) {
        document.getElementById("notification").innerHTML = "Yay! You've got yourself a palindrome";
        document.getElementById("notification").className = "alert alert-success";
    } else {
        document.getElementById("notification").innerHTML = "Nay! Ain't no palindrome";
        document.getElementById("notification").className = "alert alert-danger";
    }
});


Link to CodePen with the Palindrome Checker
http://codepen.io/MarkBuskbjerg/pen/JWMWwN
RegEx

In character class, 0123456789 can be written as range 0-9. Although, this has no effect on working of RegEx, it saves some keystrokes and looks consistent with alphabets range a-z.

toLowerCase after replace

First remove the special characters and then convert the string to lower case. This, in my opinion will run fast than other way round as the number of characters to work on are reduced.(Not Tested)

When doing this, don't forget to add i flag on the RegEx.

str.replace(/[^a-z0-9]+/gi, "").toLowerCase();


return boolean;

if (str == reversedStr) {
    return true
} 
return false


can be written as return str == reversedStr. It is also recommended to use strict equality operator.

return str === reversedStr;


See Which equals operator (== vs ===) should be used in JavaScript comparisons?

Caching DOM element reference

In the click handler of button, #notification is referenced four times. All times, it is read again from DOM. This can be slower. The element can be cached and used whenever required.

var notification = document.getElementById('notification');
...
...
notification.innerHTML = 'Hello World!';




Complete Code

Updated after suggestions from Ismael Miguel 

// After DOM is completely loaded
document.addEventListener("DOMContentLoaded", function() {
    "use strict";

    // Cache
    var palindromeInput = document.getElementById("inputPalindrome");
    var notification = document.getElementById("notification");

    function isPalindrome(str) {
        str = str.replace(/[^a-z0-9]+/gi, "").toLowerCase();
        return str.split("").reverse().join("") === str;
    }

    document.getElementById("checkPalindrome")
        .addEventListener("click", function() {

            if (isPalindrome(palindromeInput.value)) {
                notification.innerHTML = "Yay! You've got yourself a palindrome";
                notification.className = "alert alert-success";
            } else {
                notification.innerHTML = "Nay! Ain't no palindrome";
                notification.className = "alert alert-danger";
            }
        });
});