I Made a Simple UI for the Palindrome Checker JavaScript Project - Feedback Please

Code Feedback
1

So I had a lot of fun doing the JavaScript projects, but really didn’t understand how JavaScript could be used in an actual web page. Then I started the front-end libraries challenges hoping that it would become clear, but now I feel like I’m learning so much new framework stuff without having the foundation of using pure JavaScript in an app. So I decided to take a quick detour to make a super simple UI for the palindrome checker project using just JavaScript.

Can you take a look at it and check if I’m doing everything correctly? Here’s some questions I have:

  1. It seems like I write document.getElementById() many times. Is this the best way to do this?
  2. To display the results I use a single <p> element and change the inner text and the color style property. Is this good? Should I have separate <p> elements instead and change their visibility instead?

Thanks so much for any feedback you can give! I know this is just a super simple project, but I want to know I’m doing this correctly before things get more complicated. :sweat_smile:

https://codepen.io/stressstressstress/pen/RwbXMVM

2

It’s cool that you did that.
There are different things you could do to save yourself from excessive typing. For example you could just write let results = document.getElementById("results") and then type results instead of document.getElementById("results") every time.

Glad to see your enthusiasm for taking things beyond just the requirements.

1 Like
3

Nice idea thanks. Since I use document.getElementById("results") in two different functions, I should define it outside of a function right?

4

That’s up to you. If you want it to be function-scoped, you’d define it inside the function you want to restrict it to. If you want it to be more widely available, you’d give it a larger scope.

1 Like