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

            </div>
            <div class="col-md-8">
                <textarea class="col-md-12" id="inputPalindrome" rows="5">Borrow or rob?</textarea>
            </div>
        </div>
        <div class="row row-margin">
            <div class="col-sm-3">

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

.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;
 }

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";
    }
});

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

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

return str === reversedStr;

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

// 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";
            }
        });
});

(function () {
    function isPalindrome (str) {
        // ...
    }

    document.getElementById("checkPalindrome")
        // ...
}());

// value is much clear
var value = document.getElementById("inputPalindrome").value;

/[^a-z0-9]+/gi
/[^a-z0-9]/gi

var value = document.getElementById('inputPalindrome').value,
    notification = document.getElementById('notification');

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

function checkPalindrome () {
    'use strict';
    // ...
}

document.getElementById('checkPalindrome')
    .addEventListener('click', checkPalindrome);

(function () {
    'use strict';

    var value = document.getElementById('inputPalindrome').value,
        notification = document.getElementById('notification');

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

    function checkPalindrome () {
        if (isPalindrome(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';
        }
    }

    document.getElementById('checkPalindrome')
        .addEventListener('click', checkPalindrome);
}());

const arrayFunctionOnString = (s, f) => f(s.split("")).join("");

const reverseString = s => arrayFunctionOnString(s, d => d.reverse());

const cleanString = s => s.toLowerCase().replace(/[^a-z0-9]/g, "");

const isPalindrome = s => s === reverseString(s);

const isLoosePalindrome = s => isPalindrome(cleanString(s));

const compose = (f, g) => x => f(g(x));

const isLoosePalindrome = compose(isPalindrome, cleanString)

var variableName = variableName.replace(/s/g, '');