Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

My code isn’t getting saved here.
secondly My code is running perfectly in my IDE but same code is not displaying results here . Don’t know what is happening.

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>
      Learn Modern JavaScript methods by building football team cards
    </title>
    <link rel="stylesheet" href="styles.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    </head>
    <body>
      <main class="container">
         <h1 id ="Fhead">Is it a palindrome ?</h1>
    <div id="middle">
        <label for="text-input"
          >Enter in text to check for a palindrome:
        </label>
    <input id ="text-input" type="text"/>
    <button id = "check-btn">Check</button>
    </div>
    <div class ="resultts"id ="result">
    <p id="disp"></p>  
    </div>
    <div id ="aboutP">
      <p id = "aboutt">
       <span role="img" aria-label="light-bulb">&#128161;</span>
      A <dfn>palindrome</dfn> is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.
      </p>
    </div>
    </main>
    script src="script.js"></script>
    </body>
</html>

/* file: script.js */

const input = document.getElementById('text-input');
const check = document.getElementById('check-btn');
const pResult = document.getElementById('disp');
const dResult = document.getElementById('result');;



check.addEventListener("click" , ()=>{
    checkForPalindrome(input.value);
    input.value="";
} );
input.addEventListener("keydown" , e =>{
    if(e.key === "enter" ){
         checkForPalindrome(input.value);
    input.value="";
    }
});

const checkForPalindrome=(str)=>{
    let crux = str;
    if (str === ' ') {
    alert('Please input a value');
    return;
  }
let str1 = str.replace( /[^A-Za-z0-9]/gi , '').toLowerCase();
console.log(str1);
 revStr = str1.split("").reverse().join("");
pResult.innerHTML = `<strong>${str}</strong> ${revStr === str1 ? "is a palindrome" : "is not a palindrome"}`;
  //dResult.classList.remove('hidden');
};

/* file: styles.css */
body {
  font-family:  Verdana, Geneva, Tahoma, sans-serif;;
  color:white;
 background-color: black;
 
}
.container {
  width: 100%;
  min-height: 100vh;
display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#Fhead{
  display:flex;
  text-align:center;
  padding:20px;
    
  bottom: 50px;
  font-size: 2.5rem;
  
  
}
#aboutP{
   height: 90px;
  width: 400px;
  font-size: 1.3rem;
  display:flex;
  text-align:center;
  padding:20px;
  
  background-color: #00471b;
  border-radius: 20px;
   align-items: center;
  justify-content: center;
   
   
  
}
#middle{
    height: 90px;
  width: 400px;
   padding:20px;
  background-color:white;
    
       align-items: center;
  justify-content: center;
  bottom: 80px;
  display:flex;
  border-radius: 20px;
   box-shadow: 0 6px 6px #002ead;
  
}
#text-input{
   height: 30px;
  width: 250px;
  text-align: center;
  font-size: 1.2rem;
  margin: 10px;
  border: none;
  border-bottom: 2px solid #5a01a7;
}
  #text-input:focus{
    border-bottom: 3px solid #5a01a7;
  }
#check-btn{
  width: 90px;
  border: none;
  padding: 10px;
  border-radius: 15px;
  background-color: #5a01a7;
  color: #fff;
  cursor: pointer;
}
label{
   display : inline;
   position: absolute;
   margin-bottom: 80px;
  
  
color: black;
}
#result{
    overflow-y: auto;
  word-wrap: break-word;
  min-height: 50px;
  color: white;
}

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

Try fixing your script tag?

3

That’s a fix, but still, it won’t respond as required. I tested the code on an external editor, everything works fine. I tend to think that the camper hasn’t fulfilled some of the tasks on the checklist, he wrote code that works rather than one that adheres to the requirements.

4

Usually console can give some hints what might be going wrong.

5

Can IDE like VScode tested the functionality of alert? i thought it was only at browser?

6

Script tag was fixed but ultimately I had to add console.log in the end after that it was fixed. Thanks for reply.

1 Like
7

Yes ultimately console.log was done on pResult element and after that it worked. Thanks for reply.