Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

I have done all that I can, but still I am not getting it right.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Palindrome Checker</title>
    <link rel="stylesheet" href="./styles.css">
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />
  </head>
  <body>
    <p class="site-name">freeCodeCamp(<i class="fas fa-fire-alt"></i>)</p>
    <h1>Is it a Palindrome?</h1>
    <form>
      <label for="text-input">Enter in text to check for a palindrome:</label>
      <input id="text-input" type="text" name="text-input" required>
      <button id="check-btn" type="submit" value="submit" >Check</button>
       <div id="result"></div>
    </form>
    <section id="information-section">
      <div><i class="far fa-lightbulb"></i></div>
      <div>
        <p>A <span class="important"><i>palindrome</i></span> is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</p>
      </div>
    </section>
    <script src="script.js"></script>
    

  </body>
  
</html>

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

result.innerHTML = `<div id="${result}"></div>`

const emptyValue = textInput.value.trim();
  const textInputValue = textInput.value;
  const regex = textInputValue.replace(/^[a-z0-9]/ig, '');
   
    const lowerInputValue = regex.toLowerCase();
    function reversedOutputValue() {
      lowerInputValue.split(" ").join("-").reverse();
    } 
  

checkBtn.addEventListener("click", () => {
  
  if (emptyValue === "") {
    return alert("Please input a value");
  } else if (lowerInputValue === reversedOutputValue()) {
    result.innerHTML = `${textInputValue} is a palindrome`;
    
  } else {
    result.innerHTML = `${textInputValue} is not a palindrome`;
  }

  
})

/* file: styles.css */
* {
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
  color: #fff;
  background-color: #a2a2fc;
  font-family: monospace, sans-serif;
  display: block;
  font-size: 20px;
  text-align: center;
  margin: 5px 10px 30px 10px;
  padding: 9px 60px 30px 60px;
  overflow: hidden;
    
}
.site-name {
  font-family: monoscape;
  font-size: 30px;
  font-weight: normal;
}
h1 {
  font-size: 45px; 
}
form {
  background-color: black;
  width: 60vw;
  height: 35vh;
  text-align: center;
  padding-top: 10px;
  border-radius: 20px;
  box-shadow:  5px 5px violet;
  margin-left: 120px;
  
}
label {
  display: block;
  padding-bottom: 20px;
}
#text-input {
  background-color: black;
  border: none;
  border-bottom: 2px #ff00f2 double;
  color: #fff;
  text-align: center;
}
#check-btn {
  background-color: #ff00f2;
  width: 90px;
  height: 33px;
  border-radius: 10px;
  font-size: 15px;
  color: #ffffff;
}
#information-section {
  background-color: #fff;
  color: #000;
  width: 60vw;
  height: 30vh;
  text-align: center;
  padding-top: 10px;
  border-radius: 20px;
  box-shadow:  5px 5px violet;
  margin-left: 120px;
  margin-top: 25px;
  
}

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

2

Have you tried to test manually one of the cases? Ie. what happens when you enter A to the #text-input and click #check-btn. What happens instead? And what causes it?

Code might not do what is expected from it, but it will do what is actually written in it. At one point what is expected doesn’t match with what really happens.

3

Let me give it a try and get back to you

1 Like
4

Maybe console.log() what this code is doing?

5

it is not working. I just tried.

6

Ok, let me give it a try

7

this is what I am getting
Uncaught TypeError: lowerInputValue.split(…).join(…).reverse is not a function

8

Copy exactly what you have there and put it inside a console.log(), like this:
console.log(lowerInputValue.split(" ").join("-").reverse());
Also console.log() your call to reversedOutputValue() and regex. This should help you see your errors when you try some of the test examples like “race car” and “1 eye for of 1 eye.”

9

i am going to try it