Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

I’ve made the Palindrome checker on my local machine and it works fine. I copied and pasted the files on line and try to run the test and saved my code but when I tried to run the test it gives only crosses. Also there is no preview on the screen. What could be wrong?

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">
    <link rel="stylesheet" href="styles.css" />
    <title>Document</title>
</head>
<body>
    <div class="flex-container">
        <div class="first">
            <img class="img-size" src="https://www.boermastreek.nl/han/freecodecamp/photos/palindrome.png">
            <h1>Is it a palindrome?</h1>
        </div>
        <div class="second">
            <label class="input-label">Enter text to check if it is a palindrome</label>
           <div class=""flex-row> 
                <input id="text-input" placeholder="Type your text here..">
                <button id="check-btn">Check</button>
            </div>
            <p id="result"></p>
            
            
        </div>
        <div class="third">
            <p>
                A palindrome is a word or sentence that's spelled the same in both directions, ignoring punctuations, case, and spacing.
            </p>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

/* file: script.js */
//define variables
let textInput = document.getElementById("text-input");
let checkBtn = document.getElementById("check-btn");
let result = document.getElementById("result");
var isPalindrome;

checkBtn.addEventListener("click", palindrome);

function palindrome() {
    if (textInput.value == "") {
        alert("Please input a value");
        result.innerHTML  = "";
        //return;
    }
    else {
        const processedStr = textInput.value
          .toLowerCase()
          .match(/[a-z0-9]/g)
          .join('');
          
        const reversedProcessedStr = textInput.value
          .toLowerCase()
          .match(/[a-z0-9]/g)
          .reverse()
          .join('');

        if (processedStr === reversedProcessedStr) {
            isPalindrome = true;
            result.innerHTML = textInput.value + " is a palindrome";
        }
        else {
            isPalindrome = false;
            result.innerHTML = textInput.value + " is not a palindrome";
        }
        return; 
    }

/* file: styles.css */
body {
    background-color: black;
}
.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  min-width: 450px;
  flex-direction: column;
}

.flex-container > div {
    width: 450px;
    height: fit-content;
    background-color: brown;
}

.img-size {
    width: 400px;
    height: auto;
    display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
}

.first {
    border-radius: 15px;
}

h1 {
    text-align:center;
    color: yellow;
}

.second {
  display: flex;
  justify-content: center;
  align-items: center;
  height: fit-content;
  min-width: 450px;
  flex-direction: column;
  border-radius: 15px;
  margin-top: 15px;
  color: yellow;
}

.input-label {
    padding-top: 5px;
    padding-bottom: 10px;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.third {
  background-color: green;
  color: yellow;
  border-radius: 15px;
  margin-top: 15px;
}

.third > p {
  width: 90%;
  padding-left: 30px;
  padding-right: -30px;
}

#check-btn {
  background-color: green;
  color: yellow;
}

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

your JavaScript seems incomplete, please check that you copied over all the code

1 Like
3

Thank you, I’ll go banging my head now.