Tell us what’s happening:
I need help please!
I passed all user stories except for no. 7 and 16
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="https://cdn.freecodecamp.org/universal/favicons/favicon.ico">
<title>Palindrome Checker</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main class="container">
<img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo">
<h1 class="title">Is it a Palindrome?</h1>
<div class="input-container">
<label for="text-input">Enter text to check for a palindrome:</label>
<input class="text-input" id="text-input" type="text" placeholder="Type here...">
<button class="check-btn" id="check-btn">Check</button>
<div class="result-message" id="result"></div>
</div>
<div class="definition-container">
<p class="definition">
<span role="img" aria-label="light-bulb">💡</span>
A <dfn>palindrome</dfn> is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.
</p>
</div>
</main>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Verdana', Geneva, Tahoma, sans-serif;
background-color: #0a0a23;
color: #ffffff;
}
.container {
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.logo {
height: 30px;
margin-bottom: 20px;
}
.title {
text-align: center;
padding: 10px 0;
font-size: 2.5rem;
margin-bottom: 20px;
}
.input-container {
width: min(100vw, 450px);
padding: 20px;
background-color: white;
border-radius: 20px;
box-shadow: 0 6px 6px #002ead;
display: flex;
flex-direction: column;
align-items: center;
}
label {
color: #0a0a23;
margin-bottom: 10px;
}
.check-btn {
width: 90px;
border: none;
padding: 10px;
border-radius: 15px;
background-color: #5a01a7;
color: #fff;
cursor: pointer;
margin-top: 10px;
}
.text-input {
height: 30px;
width: 250px;
text-align: center;
font-size: 1.2rem;
margin: 10px 0;
border: none;
border-bottom: 2px solid #5a01a7;
}
.text-input:focus {
border-bottom: 3px solid #5a01a7;
outline: none;
}
.text-input::placeholder {
text-align: center;
}
.result-message {
padding: 10px;
border-radius: 5px;
background-color: #f9f9f9;
max-width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
overflow: hidden;
white-space: normal;
color: black;
}
.definition-container {
width: min(100vw, 450px);
font-size: 1.3rem;
background-color: #00471b;
margin-top: 20px;
padding: 20px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.definition {
text-align: center;
}
/*body {
font-family: 'Arial', sans-serif;
background-color: #e9ecef;
color: #343a40;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.app-container {
background: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
text-align: center;
width: 350px;
}
h1 {
font-size: 28px;
margin-bottom: 20px;
color: #007bff;
}
input[type="text"] {
width: 100%;
padding: 12px;
border: 2px solid #007bff;
border-radius: 5px;
margin-bottom: 15px;
font-size: 16px;
}
input[type="text"]:focus {
border-color: #0056b3;
outline: none;
}
button {
background-color: #007bff;
color: white;
border: none;
padding: 12px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
.result-message {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
color: #28a745; /* Green color for success messages */
}
/* file: script.js */
const textInput = document.getElementById("text-input");
const checkButton = document.getElementById("check-btn");
const result = document.getElementById("result");
function processInput(inputElement) {
let inputText = inputElement.value; // Get the value from the input element
if (!inputText) {
alert("Please input a value");
return null; // Return null if input is empty
} else {
// Adjusted regex to keep the specific characters, including backslashes
const regex = /[^a-zA-Z0-9(_):\/\-\\]/g; // Keep numbers, letters, and specified characters, including spaces
const processedInput = inputText
.replace(regex, "") // Replace non-matching characters
.toLowerCase(); // Convert to lower case
console.log(processedInput); // Output the processed input
return processedInput;
}
}
// This function reverses the processedInput to test for palindrome
const makingPalindrome = (processedInput) => processedInput.split("").reverse().join("");
function checkForPalindrome() {
const originalInput = textInput.value; // Store the original input for display
const processedInput = processInput(textInput); // Get processed input
if (processedInput === null) return; // Exit if there's no input to process
const reversedInput = makingPalindrome(processedInput); // Reverse the processed input
console.log(reversedInput); // Log the reversed input for debugging
let resultMsg = "";
if (reversedInput === processedInput) {
resultMsg = `${originalInput} is a palindrome`;
} else {
resultMsg = `${originalInput} is not a palindrome`;
}
result.textContent = resultMsg; // Display the result
// Clear the input field after checking
textInput.value = ""; // Reset the input field
}
checkButton.addEventListener('click', checkForPalindrome);
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36
Challenge Information:
Build a Palindrome Checker - Build a Palindrome Checker