Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

I redid my code to try and figure out why the only thing I was getting was the alert message any time I typed something in but now my code isn’t working at all. And when I read the code it makes sense. Could someone help me out please.

Your code so far

<!-- file: index.html -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Palindromes</title>

<link rel="stylesheet"  href="styles.css"></link>
</head>

<body>
  <main class="container">
    <h1 class="title">Is this a palindrome</h1>
    <div class="palindrome-div">
      <label for="text-input"> Enter text</label>
      <input id="text-input" value="" type="text" />
      <button id="check-btn">Check</button>
<div id="result"></div>
<script src="./script.js"></script>
</main>
</body>
</html>

/* file: styles.css */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  background-color: black;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}
.container {
  padding: 20px;
  margin: 20px;
}


/* file: script.js */
const input = document.getElementById("text-input");
const check = document.getElementById("check-btn");
const result = document.getElementById("result");
const str = '';

const checkIfText = () => {
  if (input.value = ''){
    alert("Please input a value");
  }
};

const checkIfPalindrome(){
  checkIfText();
  const cleanInput = input.value.toLowerCase().replace(/[^a-z]/g, '');
  const reverseInput = cleanInput.split('').reverse().join('');
  if (cleanInput === reverseInput){
    result.innerText = `${input.value} is a palindrome`;
  }else if (input.value !== reverseInput){
    result.innerText = `${input.value} is not a palindrome`
  }
};
check.addEventListener("click", checkIfPalindrome);
//function checkIfText(e){
  //let str = '';
  //if (str.length === 0)//(input.value =' '){
   //result.innerText = "Please input a value";
   //console.log("Please input a value"); 
   //{alert("Please input a value");
  //} else {
 // const cleanInput = input.value.toLowerCase().replace(/[^a-z]/g, '');} 
  
  //function checkIfPalindrome(){
   // checkIfText();
  //if (cleanInput > str.length[0] $$ cleanInput === 'a')

  //if (cleanInput === 'a'){
    //{result.innerHTML = `${input.value} is a palindrome`;
  //} else if (cleanInput === cleanInput.split('').reverse().join('')){
    //result.innerHTML = `${input.value} is a palindrome`;} else {
      //result.innerHTML = `${input.value} is not a palindrome`;
    //}
//}
//};
//check.addEventListener("click", checkIfPalindrome)//

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Safari/605.1.15

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

I would open the Console pain and look for error messages.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.