Tell us what’s happening: its working well but it doesn’t pass the test
Describe your issue in detail here.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Build a Palindrome Checker
</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>check for palindrome<h1>
<div>
<input id="text-input"
type="text-input"></input>
<button id="check-btn">Check</button>
</div>
<blockquot><hr></hr>
</blockquote>
<div type="container" id="result"></div>
<script src="./script.js"></script>
</body>
</html>
/* file: styles.css */
#result{
width: 300px;
height: 40px;
color: black;
}
body{
position: absolute;
}
/* file: script.js */
const input = document.getElementById("text-input");
const chkbtn = document.getElementById("check-btn");
const resulto = document.getElementById("result")
chkbtn.addEventListener('click',(e) =>{
e.preventDefault()
if(input.value === ""){
alert("Please input a value")}
const str = input.value.replace(/[\W_]/g, "");
const lowerd = str.toLowerCase()
const rev = lowerd.split("").reverse().join("")
if(lowerd === rev){
result.innerText=`"${input.value} is a palindrome"`
}else{
result.innerText=`"${input.value} is not a palindrome"`
}
return
})
result.style.display= "block"
Your browser information:
User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 17_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.3.1 Mobile/15E148 Safari/604.1
Challenge Information:
Build a Palindrome Checker Project - Build a Palindrome Checker
