Tell us what’s happening:
I am truly stuck! I have been trying to get the user story of satisfying the _eye test but I can’t progress. Please help me by giving me a hint of how to move forward or what to research further
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" />
<title>Build a Palindrome Checker Project</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
<div class="title-container">
<h1 class="title">Is it a Palindrome?</h1>
</div>
<div class="divider"></div>
<details class="rules-container">
<summary>What is a Palindrome?</summary>
<p>A <span><em>palindrome</em></span> is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</p>
</details>
<div class="dropdown-container">
<section id="enter-line">Enter in text to check for a palindrome:</section>
<input type="text" id="text-input" name="text-input" placeholder="Enter a word"/>
<button type="button" id="check-btn">Check</button>
<div id="result"></div>
</div>
</main>
<script src="./script.js"></script>
</body>
</html>
/* file: script.js */
const textInput = document.getElementById("text-input");
const checkButton = document.getElementById("check-btn");
const result = document.getElementById("result");
checkButton.addEventListener("click", (event) => {
textInput.value === '' ? alert("Please input a value") : resultDisplay(textInput);
});
//Helper Function - I had the thought of converting all letters to lowercase and accepting the underscore character too to satisfy the _eye test.
// function charAccept(textInput){
// const toLowerCase=/[a-zA-Z_]+/;
// return toLowerCase.test(textInput);
// }
function palindrome(textInput){
if (charAccept(textInput)){
const textValue=textInput.value;
let textRecieved = textValue.split("").reverse().join("");
return textValue === textRecieved;
}else{
return false;
}
}
function resultDisplay(textInput){
palindrome(textInput) ?
result.innerHTML=`${textInput.value} is a palindrome`:result.innerHTML=`${textInput.value} is not a palindrome`
};
/* file: styles.css */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--dark-grey: #0a0a23;
--white: #ffffff;
--yellow: #f1be32;
}
body {
color: var(--white);
background-color: var(--dark-grey);
}
.title-container {
margin: 10px 0;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.title {
font-size: 2.5rem;
}
.divider {
margin: auto;
width: 150px;
height: 10px;
background-color: var(--yellow);
}
.rules-container {
padding: 10px;
margin: 30px;
border-radius: 15px;
border: 5px solid var(--yellow);
text-align: center;
}
.rules-container p {
margin: 10px 0;
}
.dropdown-container {
width: 50%;
margin: 40px auto;
padding: 10px;
position: relative;
background-color:white;
color:var(--dark-grey);
}
#text-input placeholder{
color: red;
}
@media (max-width: 375px) {
.title {
font-size: 2rem;
}
.dropdown-container {
width: 80%;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36
Challenge Information:
Build a Palindrome Checker Project - Build a Palindrome Checker