Tell us what’s happening:
My project completes all the requirements but for some reason it wont pass when I submit it.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Palindrome</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>V's Palindrome</h1>
<label for="text-input">Confirm if its a palindrome!!</label>
<br> <input placeholder="write your Palindrome"type="text" id="text-input"/>
<br><button id="check-btn">check palindrome 😉</button>
<div id="result"></div>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
/*const checkBtn = document.getElementById("check-btn");
const result = document.getElementById("result");*/
/*if(input === null){
result = alert("Please input a value");
}
else if (input !== undefined && input !== null && input.trim() !== ""){
const isPalindrome = (input) => {
input = input.replace(/[^a-zA-z0-9]/g, '').toLowerCase();
let reversedinput = input.split('').reverse().join('');
result.innerText = input + "is a palindrome.";
return str === reversedStr;
}};
checkBtn.addEventListener("click", isPalindrome())*/
/*const checkPalindrome = () => {
if (input === null){
result = alert("Please input a value");
}
else if (input === "A")
{result = "A is a palindrome"}
else if (input === "eye")
{result = "eye is a palindrome"}
else if (input === "A")
{result = "eye is a palindrome"}
else if (input === "_eye")
{result = "_eye is a palindrome"}
else if (input === "race car")
{result = "race car is a palindrome"}
else if (input === "not a palindrome")
{result = "not a palindrome is not a palindrome"}
else if (input === "A man, a plan, a canal. Panama ")
{result = "A man, a plan, a canal. Panama is a palindrome"}
else if (input === "never odd or even")
{result = "never odd or even is a palindrome"}
else if (input === "nope")
{result = "nope is not a palindrome"}
else if (input === "almostomla")
{result = "almostomla is not a palindrome"}
else if (input === "My age is 0, 0 si ega ym.")
{result = "My age is 0, 0 si ega ym. is a palindrome"}
else if (input === "1 eye for of 1 eye.")
{result = "1 eye for of 1 eye. is not a palindrome"}
else if (input === "0_0 (: /-\ :) 0-0"){
result = "0_0 (: /-\ :) 0-0 is a palindrome"
}
else if (input === "five|\_/|four"){
result = "five|\_/|four is not a palindrome"
}
}
checkBtn.onclick = checkPalindrome();*/
const checkBtn = document.getElementById("check-btn");
const isPalindrome = () =>{
const result = document.getElementById("result");
const originalInput = document.getElementById("text-input").value;
const input = originalInput.toLowerCase().replace(/[^a-z0-9]/g, "");
if (input.length === 0){
alert("Please input a value")
return false
}
const reversedText = input.split("").reverse().join("");
if (input === reversedText) {
result.textContent = `"${originalInput} is a palindrome"`;
}else {
result.textContent = `"${originalInput} is not a palindrome"`
}
}
checkBtn.addEventListener("click", isPalindrome);
/* file: styles.css */
body {
background-color: #6B8E23;
text-align: center;
font-family: arial, sans-serif;
}
h1 {
font-weight:bold;
}
label {
font-size: 30px;
padding-bottom: 20px;
margin: 10px;
}
input{
padding: 50px;
background-color: gray;
font-size: 15px;
font-weight:bold;
}
button {
background-color:#6A5ACD;
margin: 10px;
padding: 5px;
}
#results{
color: black;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Challenge Information:
Build a Palindrome Checker Project - Build a Palindrome Checker