Tell us what’s happening:
unsure why when i run the tests it fails and gives me X’s but if i manually test all examples work
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>Is it a Palindrome?</title>
<link rel="stylesheet" href="styles.css" />
<script
src="https://kit.fontawesome.com/eaa0901734.js"
crossorigin="anonymous"
></script>
</head>
<body>
<div id="container">
<header>
<h1>Palindrome Checker</h1>
<p id="description">
<i class="far fa-lightbulb"></i>
A word or sentence that's spelled the same way both
forward and backward, ignoring punctuation, case, and spacing is otherwise known as a Palindrome.
</p>
</header>
<div id="inputs">
<input
id="text-input"
type="text"
value=""
placeholder="Type in a word or phrase."
/>
<button id="check-btn">Check Text</button>
<p id="result">
Did you know, "A Santa at Nasa" is a palindrome?
</p>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
/* file: styles.css */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
* {
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #acbe;
}
#container {
background-color: rgb(226, 226, 226);
max-width: 500px;
padding: 20px 25px 15px;
border-radius: 7px;
}
header h1 {
font-size: 21px;
font-weight: 500;
}
header p {
margin-top: 5px;
font-size: 18px;
color: gray;
}
#inputs {
margin: 20px 0 27px;
}
#inputs input {
width: 100%;
height: 60px;
outline: none;
font-size: 19px;
padding: 0 17px;
border-radius: 5px;
border: 1px solid gray;
}
#inputs input:focus {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
#inputs button {
width: 100%;
opacity: 1;
height: 60px;
outline: none;
margin-top: 20px;
font-size: 17px;
color: white;
background-color: #acbe;
border-radius: 5px;
border: none;
}
#inputs button:hover {
box-shadow: inset 3px 3px 3px rgb(45, 148, 96);
}
#result {
font-size: 19px;
text-align: center;
margin-bottom: 18px;
}
/* file: script.js */
const txtInput = document.querySelector("#text-input");
const checkBtn = document.querySelector("#check-btn");
const result = document.querySelector("#result");
let lowRegStr;
// not checking these values e.g /,.()*& //
let nc = /[\W_]/g;
// listen for key inputs into the input field //
txtInput.addEventListener("keyup", () => {
// set input to lowercase and replace any non alphabetical values with empty str values //
lowRegStr = txtInput.value.toLowerCase().replace(nc, "");
});
checkBtn.addEventListener("click", () => {
// if input is not empty run check //
if (txtInput.value != "") {
// reverse the input //
let reverseStr = lowRegStr.split("").reverse().join("");
if (reverseStr === lowRegStr) {
result.innerHTML = `${txtInput.value} is a palindrome`;
// matched //
} else {
result.innerHTML = `${txtInput.value} is not a palindrome`;
// not matched //
}
} else {
// no input then alert //
alert("Please input a value")
}
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36 Edg/129.0.0.0
Challenge Information:
Build a Palindrome Checker Project - Build a Palindrome Checker