Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

I cant seem to figure out the next step in my project challenge

Your code so far

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

  <title>Build a Palindrome Checker</title>
  <link rel="stylesheet" href="styles.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  </head>
  <body>
<main>
 
     
  <h1><span>Is it a Palindrome?</span></h1>
  <div class="container">
  <div class="palindrome-container">
    <label for="palindrome" id="enter-text">Enter in text to check for a palindrome:
 <input id="text-input" type="text"></input>
 <button id="check-btn">Check</button>
    </label>
 <div class="result" id="result"></div>   
    </div>  
  </div>
<div class="second-container">
  <p class="palindrome-text">
  💡 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: styles.css */
body {  background-color: 0a0a23;;
  display: flexbox;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin: 10px;
}
h1 {
  color: white;
  margin-top: 100px;
  display: flex;
  justify-content: center;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
}
.container {
background-color: white;
position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    width: 400px;
    margin-left: -200px;
   height: 100px; margin-bottom: 50px;
border-radius: 10px;

}
.palindrome-container {
  text-align: center;
}

.second-container {
background-color:   green; 
  border-radius: 10px;
  position: absolute;
    left: 50%;
    top: 50%;
    height: 100px;
    margin-top: -100px;
    width: 400px;
    margin-left: -200px;
    margin-top: 30px;
}
width: 400px;
  margin-left: auto;
  margin-top: auto;
  .palindrome-text {
  color: white;
    
  }
  #text-input {
    margin-top: 30px;
    border-bottom: 2px solid black;
    border-line: 
  }
  #check-btn {
    background-color: purple;
    color: white;
    border-radius: 10px;
    padding: 3px;
  }
  p {
    display: block;
  }
  .palindrome-text {
    vertical-align: middle;
    text-align: center;
  }
  #text-input {

    text-align: center;
   border-bottom: 2px solid black;
  }
  .palindrome-text {
    color: white;
    display: block;
    text-align: center;
  }

/* file: script.js */
document.getElementById("check-btn").addEventListener("click",function(){
var inputText = document.getElementById("text-input").value.toLowerCase();
var resultDiv = document.getElementById("result");
var button = document.getElementById("check-btn");

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


function isPalindrome(str) {
var stripped = str.replace(/[^a-z0-9]/gi, '').toLowerCase();
return stripped === stripped.split('').reverse().join('');
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

What have you done so far? Is it partially working? What features still need to be added?

3

Yes, it is. i I just need to work on the remaining user stories like 1. When the #text-input element contains the text not a palindrome and the #check-btn element is clicked, the #result element should contain the text "not a palindrome is not a palindrome". And the remaining ones.

4

What could be the next step to do that?

5

I’ve figured it out. Thanks

6

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