Tell us what’s happening:
Hi Guys, Thank you in advance for helping me out.
The issue that I am facing is that i have used an if condition for alert to check if the input is empty but even if the imput is not empty the alert is going on. can someone help me.
Your code so far
<!-- file: index.html -->
<!DOCTYPE>
<html>
<meta charset= "UTF-8">
<meta name="viewport" content="device-width=device, initial-scale=1.0">
<link rel="stylesheet" href="styles.css"/>
<title>Palindrome Checker</title>
<h1>Palindrome Checker</h1>
<body>
<div class="name">
<h2>Palindrome Checker Project</h2>
<h2> is it a palindrome ?</h2>
<input id="text-input" type="text" placeholder = "Your word" height= "50px" width="20px" ></input>
<button id="check-btn" type="submit" value="check"> Check </button>
<div id="result"></div>
<div class="meaning"><strong>Note:</strong> A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</div>
</div>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
:root{
font-family: Sans-serif, Arial;
}
.name{
display: flex;
flex-direction: column;
justify-content: center;
background-color: #000000;
color: green;
text-align: center;
margin: 250px 150px 250px 150px;
padding: 10px;
}
.meaning{
padding: 10px;
color: green;
}
.meaning:hover{
text-decoration: underline;
}
h1{
font-family: Arial;
text-align: center;
color: green;
}
body{
background-color: #000000;
}
/* file: script.js */
const textInput= document.getElementById("text-input");
const checkButton = document.getElementById("check-btn");
const result = document.getElementById("result");
//function to check the pattern of string
function clearInput(str){
const pattern = /[\p{P}\d\s]+/gu;
return str.replace(pattern, '');
}
//function to check the value of text and returning outcome
function checkInput(inputValue){
if(inputValue === ""){
alert("Please input a value");
}else{
clearInput(inputValue);
checkPalindrome(inputValue);
}
}
//function to check the sequence
function checkPalindrome(str){
for (let i = 0; i< str.length-1; i++){
if(str[i]=str[str.length-1-i]){
result.innerText = `${str} is a palindrome`;
}else{
result.innerText = `${str} is not a palindrome`;
return;
}
return result.innerText;
}
}
function storeValue(){
const inputValue = textInput.innerText;
checkInput(inputValue);
}
checkButton.addEventListener("click", storeValue);
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36
Challenge Information:
Build a Palindrome Checker Project - Build a Palindrome Checker