Build a Palindrome Checker Project - Build a Palindrome Checker

emmy27 · January 19, 2024, 11:30am

Tell us what’s happening:

Describe your issue in detail here.
My console keeps telling me ‘cannot read properties of null (reading “match”)’
today is my third day trying to pass this project, please I need help.

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>Building A Palindrome Checker</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div>
      <form id="my-form" method="post" required>  
      <div class="title">
        <h1>Is it a Palindrome?</h1>
      </div>
      <div class="checker">
        <p>Enter in text to check for palindrome:</p>
        <input id="text-input" class="deco" type="text">
        <button id="check-btn"  type="submit">Check</button>
        <div id="result"></div>  
      </div>
      <div class="meaning">
        <div class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" height="36" width="52" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M297.2 248.9C311.6 228.3 320 203.2 320 176c0-70.7-57.3-128-128-128S64 105.3 64 176c0 27.2 8.4 52.3 22.8 72.9c3.7 5.3 8.1 11.3 12.8 17.7l0 0c12.9 17.7 28.3 38.9 39.8 59.8c10.4 19 15.7 38.8 18.3 57.5H109c-2.2-12-5.9-23.7-11.8-34.5c-9.9-18-22.2-34.9-34.5-51.8l0 0 0 0c-5.2-7.1-10.4-14.2-15.4-21.4C27.6 247.9 16 213.3 16 176C16 78.8 94.8 0 192 0s176 78.8 176 176c0 37.3-11.6 71.9-31.4 100.3c-5 7.2-10.2 14.3-15.4 21.4l0 0 0 0c-12.3 16.8-24.6 33.7-34.5 51.8c-5.9 10.8-9.6 22.5-11.8 34.5H226.4c2.6-18.7 7.9-38.6 18.3-57.5c11.5-20.9 26.9-42.1 39.8-59.8l0 0 0 0 0 0c4.7-6.4 9-12.4 12.7-17.7zM192 128c-26.5 0-48 21.5-48 48c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-44.2 35.8-80 80-80c8.8 0 16 7.2 16 16s-7.2 16-16 16zm0 384c-44.2 0-80-35.8-80-80V416H272v16c0 44.2-35.8 80-80 80z"/></svg>
        </div>
        <p>A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</p>
      </div>
      </form>
    </div>

    <script src="./script.js"></script>
  </body>
</html>

/* file: styles.css */
body{
  background-color:#000020;
  color:#fff;
  font-family: 'Roboto', sans-serif, 'Roboto Mono', monospace 'Salsa', cursive;
  text-align:center;
  align-items:center;
  height:150vh;
  width:100%;
}
.title{
  font-size:30px;
  margin-top:40px;
}
.checker{
  background-color:#ffff;
  color:#000;
  width:30rem;
  height:11rem;
  border-radius:7px;
  padding:10px 5px;
  margin-left:180px;
  font-size:17px;
  box-shadow:0 10px 7px darkblue;
  margin-top:60px;
}
.deco{
  border:none;
  border-bottom:2px solid black;
}
button{
  background-color:purple;
  color:#fff;
  width:80px;
  height:35px;
  border-radius:12px;
}
svg{
  display:flex;
  fill:#fff;
}
.meaning{
  background-color:darkgreen;
  width:27rem;
  height:11rem;
  font-size:25px;
  padding:15px 30px;
  margin-left:180px;
  border-radius:7px;
  margin-top:60px;
  margin-bottom:50px;
  text-align:center;
  align-items:center;
}

/* file: script.js */
const myForm = document.getElementById('my-form');
const textTrue = 'its a palindrome';
const textFalse = 'its not a palindrome';
const textInput = document.getElementById('text-input');
const checkBtn = document.getElementById('check-btn');
const resultChecker = document.getElementById('result');

myForm.addEventListener('submit', onSubmit);
function onSubmit(e){
  e.preventDefault();
  if(textInput.value ===''){
    alert('Please input a value')
  } else{
    console.log('success')
  }
}

function isPalindrome(str){
  let myStr = /[^A-Za-z0-9]/g;
  const lowRegStr = str.toLowerCase().replace(myStr, '');

  const reversedStr = lowRegStr.split('').reverse().join('');
  return reversedStr === lowRegStr;

}
checkBtn.addEventListener('submit', function(e){
  e.preventDefault();
  const userInput = textInput.value;
  const palindromeReturn = isPalindrome(textInput);
  if(palindromeReturn === true){
    resultChecker.innerHTML = textTrue;
    resultChecker.className = 'alert-sucess';
  } else{
    resultChecker.innerHTML = textFalse;
    resultChecker.className = 'alert-danger';
  }
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

system · January 19, 2024, 11:30am

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

Losarig · January 19, 2024, 11:51am

Hello!
There seem to be several issues with your code.

First of all, your event listener for the form submission should be attached to the form, not to the button.
Your isPalindrome function, in the constant palindromeReturn is receiving textInput as an argument instead of the userInput
After these 2 changes, it should be working

emmy27 · January 19, 2024, 12:07pm

I did what you said and I tried to input some values and it worked but in my instructions, the code is not passing,

Losarig · January 19, 2024, 12:20pm

Okay, I checked the exercise really quickly and it seems like the expected output is not its a palindrome or its not a palindrome but [whatever user input is] is a palindrome and [whatever user input is] isn't a palindrome, try that and come back to me if you still have a problem, I’ll try to take more time to explain to you

lasjorg · January 19, 2024, 8:15pm

Please update your post with the latest version of your code.

emmy27 · January 19, 2024, 10:41pm

const myForm = document.getElementById(‘my-form’);
const textTrue = ‘is a palindrome’;
const textFalse = ‘is not a palindrome’;
const textInput = document.getElementById(‘text-input’);
const checkBtn = document.getElementById(‘check-btn’);
const resultChecker = document.getElementById(‘result’);

myForm.addEventListener(‘submit’, onSubmit);
function onSubmit(e){
e.preventDefault();
if(textInput.value ===‘’){
alert(‘Please input a value’)
} else{
console.log(‘success’)
}
}

function isPalindrome(str){
let myStr = /[^A-Za-z0-9]/g;
const lowRegStr = str.toLowerCase().replace(myStr, ‘’);

const reversedStr = lowRegStr.split(‘’).reverse().join(‘’);
return reversedStr === lowRegStr;

}
myForm.addEventListener(‘submit’, function(e){
e.preventDefault();
const userInput = textInput.value;
const palindromeReturn = isPalindrome(userInput);
if(palindromeReturn === true){
resultChecker.innerHTML = userInput + " " + textTrue;
resultChecker.className = ‘alert-sucess’;
} else{
resultChecker.innerHTML = userInput + " " + textFalse;
resultChecker.className = ‘alert-danger’;
}
});

strong text
I figured it out already and I’m done with the project. Thanks for your help

emmy27 · January 19, 2024, 10:43pm

sorry about that, the latest version is above this reply, though I figured it out already

system · July 20, 2024, 7:52pm

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