9.1 A Working Palindrome Page - Video Tutorials & Practice Problems

<v ->To get started with our palindrome detector application.</v> We'll create both an HTML file called palindrome.html and the main JavaScript file for our application called main.js. Let's create those here. (keyboard typing) Since we'll be using the palindrome module. I also have to install it here. I'll install the version corresponding to where we are in the tutorial. (keyboard typing) I suggest installing your version of this, but if for any reason you didn't publish your own NPM module you can do this NPM install mhartl-palindrome. This will work. And for reasons we'll see at the end of this chapter, I'm going to install a specific version. This is the way to install a specific NPM module with a version number mhartl-palindrome at 0.1.0. As usual, I like to get started with a hello world style application, something that just proves that something is basically working. So let's go to main.js to start off with. Remember that the palindrome module exports the phrase. Go here. (keyboard clicking) Remember this. Module.exports phrase. So here I'm gonna say (keyboard typing) let phrase equal then require the module. (keyboard typing) You can use const here too. I tend to use let as a default, but both will work. (keyboard typing) And let's just make an alert in our browser that shows that the palindrome tester is working. Let's do new phrase and then a known palindrome. (keyboard typing) so this dot palindrome should return true. So we should see true pop up in the browser. By the way, although it looks like we're calling palindrome on the phrase constructor here, it's worth noting that JavaScript is smart enough to create the object instance first and then called the palindrome method on it. So in other words, we say new phrase of the argument that returns a phrase object instance and then palindrome gets called on that, returning true or false in this case, it should return true. Now let's recall how to include this into a webpage. Let's look at our index file. We can include JavaScript source like this, script source equals day.js in this case, remember this from chapter four. So we can do the same thing here. In fact we can just copy this into here. Gonna change the title to palindrome tester. Let's get rid of this here. Let's put it in H1 here. (keyboard typing) So if we change day.js to main.js, seems like it should work right? The exact analogy here. Well let's look at it in the browser. All right well, we see the H1, it's working but unfortunately the alert didn't fire. Let's take a look at the inspector to see if we can figure out what is going on. Right well this isn't a problem favicon.ico. Ah, reference error. Can't find variable require. You can see here. So the problem here is that as we've talked about several times before, JavaScript has these weird origins in the browser and among other things you can't include one JavaScript file into another. Which means that JavaScript doesn't know about require, require is added by node JS. Luckily, there is a way around this. There's a node module called Browserify that will convert a file like main.js that uses an NPM module into something that can be included into a browser. By the way if you look in the text, you'll see that there's a link to the Google search that I used to figure this out. I didn't know how to do this when I started this tutorial, but I knew that if I went to Google and typed something like require node module into browser, that the result would probably give me the answer I needed. So that's how I found out about Browserify. Since we'll just be using the executable, we'll install it globally with NPM install --global (keyboard typing) Browserify. And the way this works is that we call Browserify on the file that we want to use in a browser. And then we give it a flag for the output file name and a standard choice for this is bundle.js. It's a bundle of main.js and its node package dependencies. dash output dash o bundle.js. Like that. And then instead of including main.js, we do bundle.js. See if this works. Aha, true. Madam I'm Adam is a palindrome So that's great. That means that we have this main.js file. And now we can add to it, secure in the knowledge that whatever we do there we can eventually put into the browser. And in fact, even at this early stage we can actually make a working palindrome detector. It's fairly simple, but it's completely functional. Let's check that out. The trick is to use a built in JavaScript function called prompt. This prompts the user to enter a value. We can then test to see if that value is a palindrome. So let's call it string. It's just a generic string we're gonna test. Prompt. Give it a string here. (keyboard typing) Let's just change this to alert string. I'm gonna show you that it's working we can do this incrementally. Ah so what's gonna happen here. If I refresh it, it says true. Why didn't it prompt me? Because I didn't run Browserify. So this is a really common mistake when doing this kind of development. And in fact, there's another module called Watchify, designed to avoid this issue, but in order to reinforce its importance, in this tutorial, we'll always run Browserify by hand. So let's do that. Now we refresh aha. Look at that, that worked. This is the string I entered at the prompt and now it's been displayed in the alert. So all I have to do is test it for being a palindrome. (keyboard typing) Create a phrase, and then we can say, if the phrase is a palindrome, raise an alert that says it's a palindrome, otherwise raise an alert that it's not a palindrome. (keyboard typing) I'd like to use the back tick notation here so I can interpolate phrase.content. So phrase.content is a palindrome. Oops, did it period there. I want a semicolon. Else I just copied that line cuz I'm gonna reuse it like that Else it's not a palindrome, and we're not as excited about this one. I also like to use new lines to indicate the structure. So here, this is just the overall phrase object. Then these are specific to what we're doing right now. These two lets, and then there's an if statement down here. These new lines are optional, but I just like to separate things that I feel belong together logically. Okay. Rerun Browserify. Refresh A man a plan, a canal Panama, one of the most famous palindromes and it is a palindrome. Look at that. So our detector is working. Of course we should check the other branch as well. Not a palindrome is not a palindrome that's true. Of course it would be really nice to have automated tests for this and it is possible but unfortunately that's beyond the scope of this tutorial. As mentioned in the last chapter, browser testing tends to be fairly tightly coupled to the operating system and browser that you're using. But we're off to a great start here. In fact when I first designed this section I didn't think I was gonna be able to work in the palindrome detector so early, but because of prompt and alert, we were actually able to do it. And in fact we can even deploy it. (keyboard clicking) There's index ahh and the palindrome isn't there yet. Takes a little time sometimes for GitHub pages to refresh. Oh and unfortunately that wasn't the problem. It wasn't a matter of waiting. If we go to the settings here for my repository you can see here it says your site is having problems building. And there's some variable that looks like Jekyll in one of the ReadMe files for a node module that we have nothing to do with, brace expansion. You can see here that it's in the node underscore modules directory That's right here. That's where we installed the palindrome module. But if when deploying it we need to tell GitHub pages to ignore that directory. Now, the reason that this isn't working, is because by default GitHub pages treats this application as a Jekyll site. Now you'll be familiar with Jekyll if you followed Learn Enough CSS and layout to be dangerous, the way around this problem is to define a special file recognized by Jekyll called underscore config.yml. YML And in this file, we can tell GitHub pages to exclude certain directories, certain files as well. But in this case we just need to exclude node_modules. Like that. This is the syntax. Could do that. And now if we push it should be working, let's check it out. Aha. And there we go. All right it's working. So somewhat amazingly, even in this first section, we've managed not only to get their rudimentary palindrome detector working but also to get it working on a production website. It's pretty primitive though. So let's make it a little nicer.