import React, { useState } from
'react'
;
function
PalindromeChecker() {
const [inputText, setInputText] = useState(
''
);
const [result, setResult] = useState(
''
);
const [isPalindrome, setIsPalindrome] =
useState(
false
);
const containerStyle = {
width:
'90%'
,
maxWidth:
'31.25em'
,
backgroundColor:
'#ffffff'
,
padding:
'4em 3em'
,
borderRadius:
'0.5em'
,
boxShadow:
'0 2em 3.5em rgba(0, 9, 50, 0.3)'
,
position:
'absolute'
,
transform:
'translate(-50%, -50%)'
,
left:
'50%'
,
top:
'50%'
,
};
const appTitleStyle = {
color:
'#172039'
,
fontSize:
'1.6em'
,
};
const inputWrapperStyle = {
display:
'grid'
,
gridTemplateColumns:
'9fr 3fr'
,
gap:
'1em'
,
margin:
'2em 0 1em 0'
,
};
const inputStyle = {
border:
'none'
,
borderBottom:
'2px solid #e2e4ef'
,
color:
'#172039'
,
padding:
'1em 0'
,
fontWeight: 400,
fontSize:
'1em'
,
};
const inputFocusStyle = {
borderBottom:
'2px solid #4571f5'
,
};
const buttonStyle = {
fontSize:
'1em'
,
padding:
'1em 0.5em'
,
backgroundColor:
'#4571f5'
,
border:
'none'
,
color:
'#ffffff'
,
borderRadius:
'0.5em'
,
cursor:
'pointer'
,
};
const resultStyle = {
textAlign:
'center'
,
color:
'#ffffff'
,
fontWeight: 400,
padding:
'1em 0'
,
borderRadius:
'0.5em'
,
transition:
'0.5s'
,
};
const successStyle = {
backgroundColor:
'#01bd5f'
,
animation:
'pop 0.4s'
,
};
const errorStyle = {
backgroundColor:
'#f52a3b'
,
animation:
'pop 0.4s'
,
};
const handleButtonClick = () => {
const text = inputText
.trim()
.toLowerCase()
.replace(/[^a-zA-Z0-9]/g,
''
);
if
(text.length === 0) {
alert(
'Input cannot be empty'
);
return
;
}
const cleanedText = text.split(
''
)
.reverse().join(
''
);
const palindrome = text === cleanedText;
setResult(
palindrome ?
"Yes. It's a palindrome!"
:
'Nope. Not a palindrome!
'
);
setIsPalindrome(palindrome);
};
return (
<div className="container" style=
{containerStyle}>
<h2 className="app-title" style=
{appTitleStyle}>
Is It A Palindrome?
</h2>
<div className="input-wrapper"
style={inputWrapperStyle}>
<input
type="text"
placeholder="Enter a word"
value={inputText}
onChange={(e) => setInputText(e.target.value)}
style={
isPalindrome ? { ...inputStyle, ...inputFocusStyle } :
inputStyle
} />
<button id="btn" onClick={handleButtonClick}
style={buttonStyle}>
Check
</button>
</div>
<p
className={isPalindrome ? '
success
' : '
error'}
style={{
...resultStyle,
...(isPalindrome ? successStyle : errorStyle),
}}>
{result}
</p>
</div>
);
}
export
default
PalindromeChecker;