Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

My preview is stopped working. Even if I edited the document it does’nt display a single thing, I know It is a Known Bug. But I have this bug for more than two days. Still I’am seeing this blank white display in my preview.

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>Palindrome Checker</title> 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>
    <div class="container-fluid bg-dark text-light w-100 h-100">
                                               
          <div class="card  w-50 h-50 text-center mx-auto">
            <div class="card-header bg-warning">
              <span class="h3 text-dark text-Uppercase">Palindrome Checker</span>
            </div>
            <div class="card-body">
              <p class="h5">Enter in text to check for a palindrome :</p>
              <label><input id="text-input" type="text" class="border border-info mt-3">
              <button id="check-btn" class="btn btn-primary btn-sm">Check</button>
              </label>
              <p id="result"></p>
              <div class="card w-75 h-auto mx-auto mt-3 bg-secondary h6">
                A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.
              </div>
            </div>
          </div>
      </div>
      

    <script src='./script.js'></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

/* file: script.js */

//Now we are going to alert message if it is empty
const popUp = document.getElementById('check-btn');
const input = document.getElementById('text-input');
const output = document.getElementById('result');

popUp.addEventListener("click", function() {
  var input = document.getElementById('text-input');
    if(input.value === '') {
      alert('Please Input a Value');
    }
    // cases that ended up in Palindrome
switch (input.value) {
  case 'A':
    output.innerText = "A is a palindrome";
    break;
  case
}
});


 


/* file: styles.css */

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

i will copy your code and try it and let you know if I have the same issue.

Update: I copied just your index.html only and the elements are visible.
So if you try to remove your css and js, you can see nothing? I also copied all the rest of the code (js) and it is still displaying your elements.

What if you tried to open it in incognito mode or in a different browser?