freeCodeCamp Website Bug

Hi,

I cannot complete the projects in my current learning section (Javascript Algorithms and Data Structures) because the the project tests will not run, and the website preview is blank. I’ve read all the help forums, and all of the solutions such as making edits to the code, refreshing the page, hard refreshing the page, etc do not seem to work. It has been several days now this has been going on. How can I proceed with completing the projects?

Sean

Sometimes that’s caused by the syntax errors in the code. Could you share your code and link to the challenge?

Hi,

The project I’m having the issue with is the’ Build a Palindrome Checker’ in JavaScript Algorithms and Data Structure (Beta). Here is a link to the project: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/build-a-palindrome-checker-project/build-a-palindrome-checker

I cleared my cache and all cookies for freeCodeCamp domain, signed back in, did a hard refresh on the project page, and still am getting a blank website preview with no ability to run the tests for the project (nothing happens when the ‘Run Tests’ button is clicked). I noticed that if I delete all of my code, and then paste it back into the editor, the website will generate in the preview, but any edits after that do not reflect in the preview, tests still do not run, and if I refresh the page again, the preview goes back to blank.

Thanks for working with me on this, here is my code:

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name = "viewport" content = "width=device-wiidth, initial-scale=1.0" />
  <title>Palindrome Checker App</title>
  <link rel="stylesheet" href="styles.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
  <h1>Is it a Palindrome?</h1>
  <div id="palindrome-checker">
    <h2>Enter text to check if it's a palindrome:</h2>
    <input id="text-input" type="text"/>
    <input id="check-btn" type="submit" value="Check" />
    <div id="result" display="none">
    </div>
  </div>
  <div id="info">
     A<b>palindrome</b>is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.
  </div>
  <script src="./script.js"></script>
</body>
</html>

Styles.css

/* font-family: 'Poppins', sans-serif; */

:root {
  --background: #4B0082;
  --accent: #7CFC00;
  --text: #FFFFF0;
  --bubble: #D8BFD8;
}

*,
*::before,
*::after {
  margin: 10px;
}

body {
  
  width: 400px;
  margin: auto;
  padding-top: 150px;
  text-align: center;
  background-color: var(--background);
  color: var(--text);
  font-family: 'Poppins', sans-serif;
}

h1 {
  padding-bottom: 10px;
}

#palindrome-checker {
  background-color: var(--bubble);
  border-radius: 20px;
  border: 3px solid var(--accent);
  font-size: 10px;
  color:black;
  padding: 3px;
}

input {
  border-radius: 5px;
  text-align: center;
}

#result {
  font-size: 14px;
}

#info {
  padding: 10px;
}

Script.js

const textInput = document.getElementById('text-input');
const checkButton = document.getElementById('check-btn');
const result = document.getElementById('result');

function palindrome() {
  if (textInput.value === '') {
    alert('Please input a value');
  }
  const regex = /[^a-z\d]/g;
  let newStr = textInput.value.toLowerCase().replace(regex, '');
  let newStrRev = newStr.split('').reverse().join('');
  if (newStrRev === newStr) {
    result.innerText = `${<b>textInput.value</b>} is a palindrome`;
  } else {
    result.innerText = `${textInput.value} is not a palindrome`;
  }

  console.log(newStr);
  console.log(newStrRev);
}

checkButton.addEventListener("click", palindrome);

I’m not sure why, but my HTML code generated into website format when it posted on the forum above ^

I’ll try to post my HTML code again here , this time I will comment it out:

^ nothing appeared when I made the entire HTML code a comment

Paste the code between three backticks like this:

```
Code here
```

It will keep the code formatting and make it easier to read it.

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name = "viewport" content = "width=device-wiidth, initial-scale=1.0" />
  <title>Palindrome Checker App</title>
  <link rel="stylesheet" href="styles.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
  <h1>Is it a Palindrome?</h1>
  <div id="palindrome-checker">
    <h2>Enter text to check if it's a palindrome:</h2>
    <input id="text-input" type="text"/>
    <input id="check-btn" type="submit" value="Check" />
    <div id="result" display="none">
    </div>
  </div>
  <div id="info">
     A<b>palindrome</b>is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.
  </div>
  <script src="./script.js"></script>
</body>
</html>

Styles.css

/* font-family: 'Poppins', sans-serif; */

:root {
  --background: #4B0082;
  --accent: #7CFC00;
  --text: #FFFFF0;
  --bubble: #D8BFD8;
}

*,
*::before,
*::after {
  margin: 10px;
}

body {
  
  width: 400px;
  margin: auto;
  padding-top: 150px;
  text-align: center;
  background-color: var(--background);
  color: var(--text);
  font-family: 'Poppins', sans-serif;
}

h1 {
  padding-bottom: 10px;
}

#palindrome-checker {
  background-color: var(--bubble);
  border-radius: 20px;
  border: 3px solid var(--accent);
  font-size: 10px;
  color:black;
  padding: 3px;
}

input {
  border-radius: 5px;
  text-align: center;
}

#result {
  font-size: 14px;
}

#info {
  padding: 10px;
}


script.js

const textInput = document.getElementById('text-input');
const checkButton = document.getElementById('check-btn');
const result = document.getElementById('result');

function palindrome() {
  if (textInput.value === '') {
    alert('Please input a value');
  }
  const regex = /[^a-z\d]/g;
  let newStr = textInput.value.toLowerCase().replace(regex, '');
  let newStrRev = newStr.split('').reverse().join('');
  if (newStrRev === newStr) {
    result.innerText = `${<b>textInput.value</b>} is a palindrome`;
  } else {
    result.innerText = `${textInput.value} is not a palindrome`;
  }

  console.log(newStr);
  console.log(newStrRev);
}



checkButton.addEventListener("click", palindrome);

It must be a syntax error in my javascript code, because when I delete all the Js code from the editor, the preview is no longer blank!

I found the syntax error. Thank You!

1 Like