Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

  1. When you click on the #check-btn element without entering a value into the #text-input element, an alert should appear with the text “Please input a value”.
    Failed: 5. When the #text-input element only contains the letter A and the #check-btn element is clicked, the #result element should contain the text “A is a palindrome”.

Your code so far

<!-- file: index.html -->
<html lang="en">
<head>
  <meta name="author" content="Owusu Julius Boateng">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device=with, initia-scale=1.0 ">
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1>Palindrome Checker</h1>
  <h2>By: <span>Owusu Julius Boateng</span></h2>

  <div class="input-section">
    <input type="text" id="text-input" placeholder="enter text"></input>
    <button id="check-btn">Check</button>
     <p id="result">Result<p>
  </div>

 <div class="definition">
   <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>


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

</html>


/* file: script.js */
const checkButton = document.getElementById('check-btn');
const inputText = document.getElementById('text-input').value.trim();
const result = document.getElementById('result');

function checkPresence() {
        if (inputText === '') {
                 alert("Please input a value");  
                  return;
          }; 

          if (inputText === 'A') {
             result.textContent = `${inputText} is a palindrome`
          } 
         
           
};


checkButton.addEventListener('click', checkPresence);





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

body {
  font-family: Arial;
  background-color: black;
}

h1, h2 {
  color: #fff;
  text-align: center;
}

h2 span {
  text-shadow: 3px 3px 5px rgba(255, 255, 255, 0.313);
}

.input-section {

  display: grid;
  width:400px;
  grid-template-columns: 250px 50px;
  background-color: #fff;
 column-gap:50px;
  border: 1px solid #fff;
  border-radius: 1.5rem;
  padding: 0.75rem;
  margin: 40px auto;
  box-shadow: 0px 0px 7px #fff;

}

#text-input {
  margin-left: 15px;
  margin-bottom: 20px;
  padding: 2rem;
  border: none;
  border-color:#fff;
}

#text-input:focus {
  
}

#check-btn  {
 height: 40px;
 width: 60px; 
 align-self: center;
 float: right;
 border: none;
 border-radius: 5px;
 color: #fff;
 box-shadow: 5px 5px 7px #000;
 background-color :purple;
 
 padding: 0.75rem;
 font-weight: bold;

}
#check-btn:hover, #check-btn:hover:focus  {
     background-color: #fff;
     color: purple;
     transition: 1s all ease;
     transform: scale(1.1);
}



#result {
  text-align: center;
  color: purple;
}

.definition {
  width:400px;
  grid-template-columns: 250px 50px;
  background-color: purple;
  color: #fff;
 column-gap:50px;
  border: 1px solid #fff;
  border-radius: 1.5rem;
  padding: 0.75rem;
  margin: 40px auto;
  box-shadow: 0px 0px 7px #fff;
  transform: skewx(-25deg);
  
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:134.0) Gecko/20100101 Firefox/134.0

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

Please i need help here. Someone help me please. * 4. When you click on the #check-btn element without entering a value into the #text-input element, an alert should appear with the text "Please input a value".

Failed: 5. When the #text-input element only contains the letter A and the #check-btn element is clicked, the #result element should contain the text "A is a palindrome".

3

What have you tried so far?

4

if (inputText === ‘A’) {
result.textContent = ${inputText} is a palindrome
}

5

BELOW IS MY CODE SO FAR

const checkButton = document.getElementById(‘check-btn’);
const inputText = document.getElementById(‘text-input’).value.trim();
const result = document.getElementById(‘result’);

function checkPresence() {
if (inputText === ‘’) {
alert(“Please input a value”);
return;
};

      if (inputText === 'A') {
         result.textContent = `${inputText} is a palindrome`
      }

};

checkButton.addEventListener(‘click’, checkPresence);

6

Test #4 is passing, isn’t it? What’s your questions then?

7

after it passes, the next one does not pass

8

i mean test #5 does nor pass

9

Does it work when you manually try entering A and checking if it’s palindrome?

10

No please. It does not work when I I manually enter A

11

And that is the issue i am facing

12

what value does inputText take? when? does it ever change?

13

the input is a text input. And the value will be changing because i will be entering different text values and check is they are palindrome

14

But anytime i enter a value, it does not work. It behaves as if no value was entered

15

the value of the variable will not be changing, you get the value at the start of the app only. You get the .value, which is a string, strings do not change

you see it happening in your code

16

So please how do i write the code. Help me with it.

17

you need to get the value when you need to check it

18

@OWUSUJULIUSBOATENG you have this topic, if you need more help with this project write here with the help you need and your updated code