JSFiddle - React, Tailwind, and code Playground

by vaxilart

HTML

<h1>Palindrome validator</h1>
<form>
    <input type="text" name="palindrome" id="palindrome" value="Rotator"/>
    <input type="submit" value="Validate"/>
    <div class="messages">
        <div id="success" style="display: none">That's a valid palindrome</div>
        <div id="error" style="display: none">That's an invalid palindrome</div>
    </div>
</form>

<h2>Example values</h2>
<ul>
    <li>Was it Eliot's toilet I saw?</li>
    <li>Do geese see God?</li>
    <li>A man, a plan, a cat, a ham, a yak, a yam, a hat, a canal-Panama!</li>
</ul>

CSS

#success {
  color: green;
}
#error {
  color: red;
}

JavaScript

function validatePalindrome( text ) {
  var text = text.toLowerCase().replace(/[^a-zA-Z]/g,'');
  return text === text.split('').reverse().join('');
}

$(function() {

  $('form').on('submit', function( e ) {
    e.preventDefault();
    
    var val = $('#palindrome').val();
   
    if( validatePalindrome(val) ) {
      $('#success').show();
      $('#error').hide();
    } else {
      $('#error').show();
      $('#success').hide();
    }
    
  });

});