Build a Palindrome Checker Project - Build a Palindrome Checker

Curriculum Help
21

no its not exact but to do it exact i would have to add a dash as the story 4 warning has a dash do i just lower case the i in input or

22

Your revised code hasn’t addressed all the points in my last comment.

  1. Your variable:
    const textInput = document.getElementById(“textInput”); Your variable name is now fine as you removed the dash. User story 1 says the id on the html is “text-input”. You need to write that exactly as it is inside the brackets. That refers to the ID attribute on the HTML code.

  2. You have defined a variable for your input but then you don’t go on to use that variable’s name on the code inside the bracket. This is why we say that what you put before “.value” in your code is undefined. If you match it to your variable name it should work.

  3. You still need to look whether the text message on your alert is exactly as it appears in user story 4

23

still nothing not sure whats wrong i did all you said and still nothing

const checkButton = document.getElementById("check-btn");
const textInput = document.getElementById("text-input");
const result = document.getElementBYId("result");
checkButton.addEventListener("click", ()=> {if(text-input.value === ""){alert("please input a value")}
})
24

Hi. I can see you haven’t changed the condition on your if statement and the text in the warning alert message.

Can you please post your HTML and JS in full on here so we can test it for you . Put three backticks before and after all your code to post it in the forum.

25 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> 
<meta name= "viewport" content="width=device-width,intial-sacle=1.0">
<meta http-equiv="X-UA-Compatible" content= "ie=edge">
<title> palindrome checker project</>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input id= "text-input"></input>
<button id= "check-btn"></button>
<p id ="result"></p>
<scrip src= "index.js"></script>
</body>
</html>
const checkButton = document.getElementById("check-btn");
const textInput = document.getElementById("text-input");
const result = document.getElementBYId("result");
checkButton.addEventListener("click", ()=> {if(text-input.value === ""){alert("please input a value")}
})
26

First thing I’ve noticed, error here with your opening tag. Also the value of src is wrong - have a look how you did it on an earlier project?

27

And check the href value how you did it on an earlier project.

28
palindrome checker project

Closing tag wrong.

29

Input is self closing.

30

im not sure whats wrong with the href in all the projects and the online example they all seem exactly identical

<link rel="stylesheet" href="style.css">
31

i made all the changes recommended but i still cant get the
4. When you click on the #check-btn element without entering a value into the #text-input element, an alert should appear with the text “Please input a value”. to pass and i dont know why ive been stuck for a week can anyone see anything im doing wrong thanks

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name= "viewport" content="width=device-width,intial-sacle=1.0">

<meta http-equiv="X-UA-Compatible" content= "ie=edge">

<title> palindrome checker project</title> <link rel="stylesheet" href="styles.css">

</head>

<body>

<input id= "text-input">

<button id= "check-btn"></button>

<p id ="result"></p>

<script src="index.js"></script>

</body>

</html>

const checkButton = document.getElementById("check-btn");

const textInput = document.getElementById("textInput");

const result = document.getElementBYId("result");

checkButton.addEventListener("click", ()=> {if(input.value === ""){alert("please input a value")}

})
32

here is java script

const checkButton = document.getElementById("check-btn");
const textInput = document.getElementById("textInput");
const result = document.getElementBYId("result");
checkButton.addEventListener("click", ()=> {if(input.value === ""){alert("please input a value")}
})
33

and here is html

<html lang="en">
<head>
<meta charset="UTF-8"> 
<meta name= "viewport" content="width=device-width,intial-sacle=1.0">
<meta http-equiv="X-UA-Compatible" content= "ie=edge">
<title> palindrome checker project</title> <link rel="stylesheet" href="styles.css">
</head>
<body>
<input id= "text-input">
<button id= "check-btn"></button>
<p id ="result"></p>
<script src="index.js"></script>
</body>
</html>
34

You aren’t made changes.

Script file name is script.js for the curriculum project, you currently have index.js.

Remove space after each = sign within the above elements.

id value is text-input not, textInput.

You haven’t created input variable for input element. You need to use textInput instead with value

35

i think i made all the changes but it still doesnt pass

const checkButton =document.getElementById("check-btn");
const textInput =document.getElementById("text-input");
const result =document.getElementBYId("result");
checkButton.addEventListener("click", ()=> {if(textInput.value === ""){alert("please input a value")}
36 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> 
<meta name= "viewport" content="width=device-width,intial-sacle=1.0">
<meta http-equiv="X-UA-Compatible" content= "ie=edge">
<title> palindrome checker project</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input id="text-input">
<button id="check-btn"></button>
<p id ="result"></p>
<script src= "script.js"></script>
</body>
</html>
37

Here is space issue in attribute value within both element.

38

With the above code you will pass only one challenge.

39

Hi

I had to make a lot of changes to your code for it to pass the first 4 tests for me. I will try to get back to you later on them. However I set out most of them above in my previous comments in addition to some suggested by hasanzaib1389.

In addition this line:

checkButton.addEventListener("click", ()=> {if(textInput.value === ""){alert("please input a value")}

Look at the closing brackets again to your addEvent Listener. You are missing some.

Another suggestion, put some text between your button element such as “submit” so you can see the button on the preview screen

40

the first three test were passing and i started working on test 4 and the first three tests started failing and i have no idea why ?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> 
<meta name= "viewport" content="width=device-width,intial-sacle=1.0">
<meta http-equiv="X-UA-Compatible" content= "ie=edge">
<title> palindrome checker project</>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input id="text-input"></input>
<button id="check-btn"></button>
<p id="result"></p>
<scrip src="index.js"></script>
</body>
</html>