Palindrome Challenge with JavaScript

index.html

<div id="palindrome">
  <div data-top>
    <h1>Palindrome Checker</h1>
  <span>A man, a plan, a canal. Panama</span>
  </div>
  <div data-entry>
    <input type="text">
    <button data-analyse>ANALYSE</button>
  </div>
  <div data-message id="results">Not checks yet!</div>
</div>

main.css

body{
  background: #283c86; 
  font-family: helvetica;
  background: linear-gradient(to right, #283c86, #45a247);
}
#palindrome{
  background:#fff;
  width:60%;
  margin: 0 auto;
  padding: 5px 20px;
  border: 1.5px solid black;
  text-align:center;
}
[data-top] h1{
  margin: 5px 0;
}
[data-top] span{
  display: block;
  margin: 15px 0;
  font-size:18px;
}
/*  input styling */
[data-entry] input, button{
   font-size:20px;
}
[data-entry] input{
  position:relative;
  right:-5px;
  padding:1px 10px;
  padding-left:4px;
  outline:none;
}
[data-message]{
  margin:10px auto;
  font-size:20px;
  background-color:#808080;
  color:#fff;
  padding-top: 6px;
  padding-bottom: 6px;
}

main.js

//desactivate button
document.querySelector('[data-analyse]').disabled = true;

const palindrom = (chaine) =>{
  // transport str delete space, and other character
  chaine = chaine.toLocaleLowerCase();
  chaine = chaine.replace(/[^A-Za-z0-9]/g, '');
  // reverse str and verify
  let chaineReverse = chaine.split('').reverse().join('');
  return chaine == chaineReverse;
}

const displayResults = () => {
  const value = document.querySelector('[data-entry] input').value;
  let message;
  if(value.trim() == ''){
    message = 'Not checks yet!';
    document.querySelector('#results').innerHTML = message;
    document.querySelector('#results').style.backgroundColor = '#808080';
  }else if(palindrom(value)){
    message = 'Yaay, You got yourself a PALINDROME!';
    document.querySelector('#results').innerHTML = message;
    document.querySelector('#results').style.backgroundColor = '#008000';
  }else{
    message = 'Naay, that ain’t no palindrome!';
    document.querySelector('#results').innerHTML = message;
    document.querySelector('#results').style.backgroundColor = '#FF0000';
  }
}

const controlButton = ({ target }) => {
  const value = target.value;
  if(value.trim() == ''){
    document.querySelector('[data-analyse]').disabled = true;
    // fi entry and delete value in input
    displayResults();
  }else{
    document.querySelector('[data-analyse]').disabled = false;
  }
}
//event
document.querySelector('[data-entry] input').addEventListener('input', controlButton);
document.querySelector('[data-analyse]').addEventListener('click', displayResults);