Skip to content

Instantly share code, notes, and snippets.

@hadpro24
Last active August 28, 2021 17:26
Show Gist options
  • Save hadpro24/897b9910a588fa9e6c13ccbe108cf074 to your computer and use it in GitHub Desktop.
Save hadpro24/897b9910a588fa9e6c13ccbe108cf074 to your computer and use it in GitHub Desktop.
Palindrome Challenge with JavaScript
<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>
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;
}
//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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment