I suggest if there is a way this thread is hidden from my fellow learners do so. This is due to the code being almost complete. I am wonder whether the way used in this code to clean the string is close to a correct way or should I try something else. Apart from a lot of unnecessary lines the rest of code should be complete.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Palindrome Checker</title>
<link rel="stylesheet" href="styles.css" type="text">
</head>
<body>
<main>
<p>Enter text to see if it is a palindrome.</p>
<input id="text-input" type="text">
<button id="check-btn">
Check
</button>
<div id="result"></div>
</main>
<script src="script.js"></script>
</body>
</html>
JavaScript
let textInput=document?.getElementById('text-input');
let checkButton=document?.getElementById('check-btn');
let output=document?.querySelector("#result");
function palindromeCheck(){
let textInputContent=textInput.value;
if (textInputContent===""){
alert("Please input a value");
}
let cleanedString=reformat(textInputContent);
console.log("cleaned string is " + cleanedString);
let j=Math.floor(cleanedString.length)-1;
if (j===0){
output.innerText=textInputContent + " is a palindrome";
return;
}
for (let i=0; i<Math.floor(cleanedString.length/2); i++) {
console.log("for 1 entered");
console.log(cleanedString[i])
console.log(cleanedString[j])
if(cleanedString[i]!==cleanedString[j]){
console.log("if 1 entered");
output.innerText=textInputContent + " is not a palindrome";
return ;
}
j--;
if(i===Math.floor(textInputContent.length/2)-1){
//console.log("if 1 entered");
output.innerText=textInputContent + " is a palindrome";
return ;
}
}
}
function reformat(stringInput){
stringInput=stringInput.toLowerCase();
console.log(stringInput);
let outputString='';
let alphaNumeric=
[0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
//console.log(alphaNumeric);
let j=0;
for(let i in stringInput){
console.log(stringInput[i]);
if (stringInput[i] in alphaNumeric){
console.log('test' + stringInput[i]);
outputString+=stringInput[i];
j++;
}
}
//const regex=/[\s]/g;
//return stringInput.replace(regex, "");
//return outputString;
return stringInput;
}
checkButton.addEventListener("click", palindromeCheck);
CSS file is empty hence not included.
If you could tell why colour is showing in my HTML code but not JavaScript please let me know what I am doing wrong.
