Build a Palindrome Checker Project - Preview Pane completely white

JavaScript
1

Tell us what’s happening:

In the Palindrome Checker project, my preview pane is completely white. The first day I was working on this, my preview pane was populated with the content and styles, and the alert for “Please input a value” was functioning.

One day after, and still persisting, my preview pane is completely blank.

Screenshot 2024-02-14 at 1.27.19 PM
Screenshot 2024-02-14 at 1.27.19 PM1920×953 186 KB

I reported a bug on GitHub but an admin suggested it was a Forum Issue.

My concern is not with checking the code (right now), but getting the preview pane to actually display something.

Any help is appreciated, thank you!

Your code so far

<!-- file: index.html -->
<head>
  <title>Palindrome Checker</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1 class="title">Palindrome Checker</h1>
  <p><strong>Enter a word, phrase, or string of numbers here to check if it's a palindrome!</strong></p>
  <p>A palindrome is a word or phrase that can be read the same way forwards and backwards, <em>ignoring punctuation, case, and spacing.</em></p>
  <form>
  <input id="text-input"></input>
  <button id="check-btn">Check</button>
  </form>
   <div id="result"></div>
<script src="script.js" type="text/javascript"></script>
</body>

/* file: styles.css */
body {
  color: white;
  background-color: #222;
  margin: 30px;
  text-align: center;
}

input {
  width: 80%;
  margin: 10px;
  padding: 10px;
}

button {
  border-radius:50px;
  padding: 10px 60px;
  margin: 0 auto;
  display: block;
  background-color: #0cf;
}

form {
  padding: 10px;
  border-radius: 6px;
  background-color: #444;
}



/* file: script.js */
//define variables
const textInput = document.getElementById("text-input");
const checkButton = document.getElementById("check-btn");
const result = document.getElementById("result");

const cleanString = (textInput.value) => {
  return input.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
}


///[^a-zA-Z0-9]/g regex to clean 

/*
- If it has something:
-Take textInput and remove punctuation, case, and spacing
- define as cleanedInput
- get the length of cleanedInput
- find the middle
-- the middle is the length/2
- See if the first half forward is the same as the second half reverse
- need to define firstHalf and secondHalf
- if they are, say it's a palindrome
- if unequal, say not a palindrome
*/

const checkIfPal = () => { //Palindrome checker function

}

//Click button. If blank, error. If not, run script.
checkButton.addEventListener("click", () => {
  if (textInput.value.length <= 0) {
  alert('Please input a value');
  } else { 
    checkIfPal();
  }
});

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

Open the console you have an error.

Parameters are passed values when the function is called. The only value they can contain is a default value assignment or the value passed to the function. You can not add a value directly to what should be a parameter (i.e. textInput.value is not a valid parameter).

const cleanString = (textInput.value) => {
  return input.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
}

You can try clearing the browser cache and cookies if your code is stuck as is.

1 Like
3

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