The full video and many others like it are all available as part of our Frontend Masters subscription.

Kyle Simpson

Kyle Simpson is an Open Web Evangelist from Austin, TX, who's passionate about all things JavaScript. He's an author, workshop trainer, tech speaker, and OSS contributor/leader.

Kyle Simpson

You Don't Know JS

For this exercise, you will be using the files in the day1/ex2 folder. Look at the README.md file for exercise instructions.

Get Unlimited Access Now

Kyle Simpson: All right, exercise two. I've listed it 20 minutes. It shouldn't take you more than five. because really, you're going to write like eight lines of code. But as they say, they important thing is which eight lines of code do we write? So, let's open up exercise two. You can open up the read-me and the JS file.

I'm going to open up, in a browser, the fixed version of the code because I want you to see what it's supposed to do. Well actually it doesn't matter. The fixed version is not fixed. Let's just look at exercise two. I'll open up the HTML file. It's a simple note taker app.

We have built in. You know you can click on the notes and highlight them. You can click out. You can add stuff and you have a little help dialog that tells you what to do. So it's a simple little note taker. You're not going to add any functionality to this app, but what you are going to do is use the classic module pattern to organize the code better.

So, if we look at EX2.JS, it's a whole bunch of global functions with no organization whatsoever. And what I want you to do, is using what I just taught you about the module pattern, go back and turn this into a well formed Module. And I explained how to do that.

You'll have two methods on your public API, one will be called init, one will be for loading and data, you'll create yourself a little module API and then modify the code to do that. So, again, you're literally writing like less than 15 lines of code. If you find yourself doing lots and lots of coding, you're doing it the hard way.

It's very simple but go back to your slides where I discussed the classic module pattern, the characteristics of a wrapper function, and a return value and all that. That should be more than enough to get you going. I'll give you guys maybe eight or ten minutes, and then we'll come back and I'll talk you through a solution.

Ready to take your code to the next level?

Intense courses with world-class teachers and unlimited access to our growing library of videos for the great price of $39 per month.

Get Unlimited Access Now